Help with button interaction - Javascript

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.

  <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>
<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 = "";

Can you provide us with a code/link?

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


(@KittyKora done)

1 Like

1st the HTML
1: why does the head tag closes bellow the body tag?

Then the JS you where asking for two thing here.
So I added information in a codepen. I could came up with that might help you out