<!-- preso da https://developer.chrome.com/docs/devtools/javascript/ -->
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="https://googlechrome.github.io/devtools-samples/favicon-96x96.png">
<title>Debugging JavaScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
font-size: 1.5em
}
input, button {
min-width: 72px;
min-height: 36px;
border: 1px solid grey;
}
label, input, button {
display: block;
}
input {
margin-bottom: 1em;
}
</style>
</head>
<body>
<h1>Debugging JavaScript</h1>
<label for="num1">Numero 1</label>
<input placeholder="Numero 1" id="num1">
<label for="num2">Numero 2</label>
<input placeholder="Numero 2" id="num2">
<button>Somma di Numero 1 e Numero 2</button>
<p></p>
<script>
function onClick() {
if (inputsAreEmpty()) {
label.textContent = 'Errore: almeno uno dei valori è vuoto.';
return;
}
updateLabel();
}
function inputsAreEmpty() {
if (getNumber1() === '' || getNumber2() === '') {
return true;
} else {
return false;
}
}
function updateLabel() {
var addend1 = getNumber1();
var addend2 = getNumber2();
var sum = addend1 + addend2;
label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}
function getNumber1() {
return inputs[0].value;
}
function getNumber2() {
return inputs[1].value;
}
var inputs = document.querySelectorAll('input');
var label = document.querySelector('p');
var button = document.querySelector('button');
button.addEventListener('click', onClick);
</script>
</body></html>
Comments