Please see the code below.
Kindly press the “Example” button followed by the “Enter” button. The textarea gets populated as intended between the numbers in textbox “first” and “second”. When the “Clear” button is clicked, as intended, the contents of the two textfields and the textarea are cleared. When the “Example” button is again pressed, the two text boxes gets populated again as intended but when the “Enter” button is pressed the textarea does not get populated. Why is that?. Appreciate a response.
<html>
<head>
<title>Temp</title></head>
<body>
<div class = "container">
<form name = "my-form">
<input type = "text" name = "first" id="first" class = "mytext" placeholder = first>
<input type = "text" name = "second" id="second" class = "mytext" placeholder = second>
<button type = "button" id = "btn1">Enter</button>
<button type = "button" id = "btn2">Example</button>
<button type = "button" id = "btn3">Clear</button><br><br>
<textarea id = "my-values" rows = "5" cols = "20"></textarea>
<p id="demo"></p>
</form>
</div>
<script >
document.getElementById('btn1').addEventListener('click', calculate);
function calculate(){
// 1. Grab the input values and convert them into numbers.
var txtOneNumber = document.getElementById('first').value;
var txtTwoNumber = document.getElementById('second').value;
// display results in the DOM textarea
var textAreaResults = document.getElementById("my-values");
for (var k = txtOneNumber; k <= txtTwoNumber; ++k)
textAreaResults.innerHTML += k + '\n';
};
document.getElementById('btn2').addEventListener('click', populate);
function populate(){
// assigning two random values, 18 & 25
document.getElementById("first").value = "18";
document.getElementById("second").value = "25";
};
document.getElementById('btn3').addEventListener('click', wipeout);
function wipeout() {
document.getElementById("first").value = "";
document.getElementById("second").value = "";
document.getElementById("my-values").value = "";
};
</script>
</head>
</html>
