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);

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

<inputclass="textbox"type="number"id="number"><buttonclass="Button">Submit</button><pid="submit"></p>

Solution 2:

Try this...

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

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

<inputclass="textbox"type="number"id="number"><buttononclick="myFunction()"class="Button" >Submit</button><pid="submit"></p><scripttype ="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.

functionmyFunction(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

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

or

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

javascript

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

Into

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

<inputclass="textbox"type="number"id="number"><buttononclick="myFunction(document.getElementById('number').value)"class="Button"type="button" >Submit</button><pid="submit"></p><scripttype="text/javascript">functionmyFunction(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.

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

<!-- form tag supposed to be open --><formmethod="get"action="."><inputclass="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 --><buttononclick="myFunction(this,event)"class="Button">Submit</button><!-- form tag may be closed here or later --></form><pid="submit"></p><scripttype="text/javascript"src="../src/index.js"></script>