Passing HTML Value Into JavaScript Function

I know this question has been asked already. However, when I follow the answer given to that question it doesn't work. This is my JS function and the relevant HTML

Solution 1:

Strangely none of the answers recommended separating the HTML and JavaScript, so that's what I'll do. It's considered a best practice to not inline JS in your HTML.

const button = document.querySelector('button');
button.addEventListener('click', myFunction, false);

function myFunction() {
  console.log(document.getElementById('number').value);
  document.getElementById("submit").innerHTML = "LOADING...";
}

<input class="textbox" type="number" id="number">
<button class="Button">Submit</button>
<p id="submit"></p>

Solution 2:

Try this...

Get the value insert the function.... It will display your desire output....

function myFunction() {
var number = document.getElementById("number").value;
  document.getElementById("submit").innerHTML = "LOADING...";
}

<input class="textbox" type="number" id="number"> 
    <button onclick="myFunction()" class="Button" >Submit</button>
      <p id="submit"></p>
      <script type ="text/javascript" src="../src/index.js"></script>

Solution 3:

Like the earlier answer, you need to use single quote around 'number'. Another thing, you need to add parameter val in the myFunction(val) in the index.js.

function myFunction(val) {
    document.getElementById("submit").innerHTML = "LOADING...";
    console.log(val);
}   

Solution 4:

I thought, You used inside double quote("), using double quote("). So Please change double quote inside single quote(') or single quote inside double quote("). More over button default type is submit...

Change following

<button onclick="myFunction(document.getElementById("number").value)" class="Button" >Submit</button>

Into

<button onclick="myFunction(document.getElementById('number').value)" class="Button" >Submit</button>

or

<button onclick='myFunction(document.getElementById("number").value)' class="Button" >Submit</button>

javascript

function myFunction() {
  document.getElementById("submit").innerHTML = "LOADING...";
}

Into

function myFunction(num) {
      var n = num;//Get the number into your javascript function
      document.getElementById("submit").innerHTML = "LOADING...";
}

<input class="textbox" type="number" id="number"> 
<button onclick="myFunction(document.getElementById('number').value)" class="Button" type="button" >Submit</button>
  <p id="submit"></p>
  <script type="text/javascript">
    function myFunction(num){
      var n = num;
      
      console.log(n);
      
      document.getElementById("submit").innerHTML = "LOADING...";
    }
  
  </script>

Solution 5:

Default type of the button element is submit (and it is ok; the data will be submitted to the server). If something should be done before submission then it could be processed like this.

function myFunction(element, evn) { //here you can rename parameters
  //evn is click event, element is the button clicked
  evn.preventDefault(); //don't submit form at this moment
  document.getElementById("submit").innerHTML = "LOADING...";
  //now it is safe to submit the form
  //setTimeout is for demonstration purpose
  setTimeout(function() {
    element.form.submit();
  }, 1000);
}

<!-- form tag supposed to be open -->
<form method="get" action=".">
  <input class="textbox" type="number" id="number" name="numData">
  <!--name attr is required to send data to the server -->
  <!-- note the arguments sent to the function.
Don't change them -->
  <button onclick="myFunction(this,event)" class="Button">Submit</button>
  <!-- form tag may be closed here or later -->
</form>
<p id="submit"></p>
<script type="text/javascript" src="../src/index.js"></script>