將HTML值傳遞給JavaScript函數

Question

我知道這個問題已經被問過了。

但是，當我按照給出的答案回答時，它是行不通的。

這是我的JS函數和相關的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> 

Answer 1

嘗試這個...

獲取值，插入函數...。它將顯示您的期望輸出。

 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> 

Answer 2

我以為，您在雙引號（“）內使用了雙引號（”）。 因此，請更改單引號（'）內的雙引號或雙引號（“）中的單引號。 更多的按鈕默認類型是Submit ...

更改以下

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

進入

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

要么

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

javascript

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

進入

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> 

Answer 3

像之前的答案一樣，您需要在“數字”周圍使用單引號。 另一件事，您需要在index.js的myFunction（val）中添加參數val。

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

Answer 4

奇怪的是，沒有答案建議將HTML和JavaScript分開，所以這就是我要做的。 最好不要在HTML中內聯JS。

 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> 

Answer 5

button元素的默認類型為submit （可以，數據將被提交到服務器）。 如果應該在提交之前做一些事情，那么可以這樣處理。

 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>