Passing HTML value into JavaScript function

Question

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

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

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

use onclick="myFunction()" and access the desired elements inside your function using their ids. — Junius L
– Junius L, Commented Nov 20, 2017 at 4:06
When you click a submit button then your form is submitted immediately and no script can run after submit event. All tricks with the current page are possible when you use AJAX that is stays on the page while the request is processing asynchronously. — Alex Kudryashev
– Alex Kudryashev, Commented Nov 20, 2017 at 4:16

Andy · Accepted Answer · 2017-11-20 04:41:13Z

0

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>

edited Nov 20, 2017 at 4:41

answered Nov 20, 2017 at 4:31

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nandhi Kumar · Accepted Answer · 2017-11-20 03:49:35Z

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>

StoneMonkey · Accepted Answer · 2017-11-20 04:01:57Z

0

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

answered Nov 20, 2017 at 4:01

StoneMonkey

11 bronze badge

Comments

Maths RkBala · Accepted Answer · 2017-11-20 04:02:52Z

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>

thank you i change it to all choice but it still doesn't work
Please try this <button onclick="myFunction(document.getElementById('number').value)" class="Button" type="button">Submit</button>
now it work when i put my function in my index.html but still doesn't work when i put it in index.js but anyway Thank you.

Alex Kudryashev · Accepted Answer · 2017-11-20 05:15:19Z

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>

Collectives™ on Stack Overflow

Passing HTML value into JavaScript function

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Linked

Related