HTML用戶輸入的JavaScript問題
[英]JavaScript problems with HTML user input
問題描述
很抱歉，如果這個問題是某處回答，但我找不到任何接近我的問題或其他職位的答案。
我正在嘗試創建博客，但我仍在學習，因此我使用索引頁面進行實驗。 無論如何，我在網頁上有一個部分，您會在其中獲得依賴於用戶輸入的輸出，而我無法從網頁中獲取JavaScript所接收的輸入。
請注意 ，我只在便攜式計算機上的Microsoft Edge和手機上的Firefox中嘗試過此操作，但我認為這不是我的瀏覽器。
另外，我認為它會影響我的計算器，但這不是本文的目的。
請隨意在答案中編輯我的代碼，但最好解釋一下對代碼的編輯。
無論如何，在此先感謝您願意提供的任何幫助！
請注意 ， 我 還沒有 發現 ， 回答 我的 問題 的任何 信息 ， 所以 請 鏈接 到 后 關閉 此 職位 之前 :)
此外 ， 空格 是 未來 的代碼 ， 我 不 萬一 有人 親 不 明白 這 一點 。
function age(){ var age=document.getElementById('age'); if(age<18){ document.getElementById('Age').innerHTML="Underage"; alert("This is your age: "+age); } else{document.getElementById('Age').innerHTML="Of age"; alert("This is your age: "+age); } } function calculate(){ var num1=document.getElementById('firstNumber'); var num2=document.getElementById('secondNumber'); var sum=num1+num2; document.getElementById('Age').innerHTML=sum; }
.page{background-color:#ce6efa;} #firstHeading{font-family:Nyala, "Palatino Linotype";} label{color:#5728ad;} #Age{color:#243bd4;}
<!DOCTYPE html> <!--Work on this blog began on the 24th of June 2017--> <html> <meta charset="UTF-16"> <head> <link rel="stylesheet" href="mainpage.css"> <title>Sandi Vujaković</title> </head> <body class="page"> <h2 id="firstHeading">My life</h2> <label>First number</label> <input type="number" id="fistNumber" name="Number a"> <label>Second number</label> <input type="number" id="secondNumber" name="Number b"> <input type="submit" onclick="calculate()" value="Calculate"><br/> <p id="calc"></p> <label>Age</label> <input type="number" id="age" name="age"> <input type="submit" onclick="age()" value="Check"><br/> <p id="Age"></p> <script src="mainpage.js"></script> </body> </html>
如果我使用alert() ，則會得到奇怪的結果。 就像代碼中一樣，輸出是
This is your age: [object HTMLInputElement] 。
當我將其更改為：
var age2=++age;
alert("This is your age: "+age2);
然后輸出從[object HTMLInputElement]到NaN 。
解釋嗎？
3 個解決方案
解決方案1
2 2017-06-28 20:52:33
好的？
最初，我發現了一些不一致之處：
1-“ var age = document.getElementById（'age'）”無法報告需要哪個屬性。 在您的情況下：“值”。 在“計算”功能中，我在前兩行遇到了相同的問題
2-“ var num1 = document.getElementById（'fistNumber'）”元素ID錯誤。 我已更正“ firstNumber”
3-在您比較“計算”函數中捕獲的值的年齡和總和的兩個時刻中，我使用了“ parseInt”函數來防止變量被視為字符串並因此被連接。
我希望能有所幫助。
function age(){ var age=document.getElementById('age').value; if(parseInt(age)<18){ document.getElementById('Age').innerHTML="Underage"; alert("This is your age: "+age); } else{alert("This is your age: "+age); } } function calculate(){ var num1=document.getElementById('firstNumber').value; var num2=document.getElementById('secondNumber').value; var sum=parseInt(num1)+parseInt(num2); document.getElementById('Age').innerHTML=sum; }
.page{background-color:#ce6efa;} #firstHeading{font-family:Nyala, "Palatino Linotype";} label{color:#5728ad;} #Age{color:#243bd4;}
<!DOCTYPE html> <!--Work on this blog began on the 24th of June 2017--> <html> <meta charset="UTF-16"> <head> <link rel="stylesheet" href="mainpage.css"> <title>Sandi Vujaković</title> </head> <body class="page"> <h2 id="firstHeading">My life</h2> <label>First number</label> <input type="number" id="firstNumber" name="Number a"> <label>Second number</label> <input type="number" id="secondNumber" name="Number b"> <input type="submit" onclick="calculate()" value="Calculate"><br/> <p id="calc"></p> <label>Age</label> <input type="number" id="age" name="age"> <input type="submit" onclick="age()" value="Check"><br/> <p id="Age"></p> <script src="mainpage.js"></script> </body> </html>
解決方案2
0 2017-06-28 20:23:36
您需要獲取屬性的“值”：document.getElementById（'age'）。value;
另外，您的名字輸入ID拼寫錯誤。 “ fistNumber”
function age() { var age = document.getElementById('age').value; if(age == "" || age == null) { alert("Please enter an age!"); return; } if (parseInt(age) < 18) { document.getElementById('alert').innerHTML = "Underage"; alert("This is your age: " + age); } else { document.getElementById('alert').innerHTML = "Of Age"; alert("This is your age: " + age); } } function calculate() { var num1 = document.getElementById('firstNumber').value; var num2 = document.getElementById('secondNumber').value; var sum = parseInt(num1) + parseInt(num2); document.getElementById('alert').innerHTML = sum; }
.page { background-color: #ce6efa; } #firstHeading { font-family: Nyala, "Palatino Linotype"; } label { color: #5728ad; } #Age { color: #243bd4; }
<!DOCTYPE html> <!--Work on this blog began on the 24th of June 2017--> <html> <meta charset="UTF-16"> <head> <link rel="stylesheet" href="mainpage.css"> <title>Sandi Vujaković</title> </head> <body class="page"> <h2 id="firstHeading">My life</h2> <label>First number</label> <input type="number" id="firstNumber" name="Number a"> <label>Second number</label> <input type="number" id="secondNumber" name="Number b"> <input type="submit" onclick="calculate()" value="Calculate"><br/> <p id="calc"></p> <label>Age</label> <input type="number" id="age" name="age"> <input type="submit" onclick="age()" value="Check"><br/> <p id="alert"></p> <script src="mainpage.js"></script> </body> </html>
解決方案3
0 已采納 2017-06-28 20:27:47
所以這是我所做的更改：
- 首先，使用通過id獲取的dom元素的屬性
value。 - 然后更正HTML中
firstNumber的拼寫。 您輸錯了fistNumber。 - 同樣，在比較
age函數中的(x<18)之前，必須使用parseInt函數將字符串轉換為整數。
function age(){ var age=document.getElementById('age').value; age = parseInt(age); if(age<18){ document.getElementById('Age').innerHTML="Underage"; alert("This is your age: "+age); } else{alert("This is your age: "+age); } } function calculate(){ var num1=document.getElementById('firstNumber').value; var num2=document.getElementById('secondNumber').value; var sum=num1+num2; document.getElementById('Age').innerHTML=sum; }
.page{background-color:#ce6efa;} #firstHeading{font-family:Nyala, "Palatino Linotype";} label{color:#5728ad;} #Age{color:#243bd4;}
<!DOCTYPE html> <!--Work on this blog began on the 24th of June 2017--> <html> <meta charset="UTF-16"> <head> <link rel="stylesheet" href="mainpage.css"> <title>Sandi Vujaković</title> </head> <body class="page"> <h2 id="firstHeading">My life</h2> <label>First number</label> <input type="number" id="firstNumber" name="Number a"> <label>Second number</label> <input type="number" id="secondNumber" name="Number b"> <input type="submit" onclick="calculate()" value="Calculate"><br/> <p id="calc"></p> <label>Age</label> <input type="number" id="age" name="age"> <input type="submit" onclick="age()" value="Check"><br/> <p id="Age"></p> <script src="mainpage.js"></script> </body> </html>
Javascript - 用戶通過HTML輸入標簽輸入來設置Javascript變量？
[英]Javascript - User input through HTML input tag to set a Javascript variable?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
Javascript； html表單； 用戶輸入； 顯示輸入
Javascript - 用戶通過HTML輸入標簽輸入來設置Javascript變量？
將HTML用戶輸入保存到Javascript變量
html5 canvas javascript等待用戶輸入
使用html和JavaScript乘以用戶輸入
HTML / JavaScript顯示用戶輸入（刷新問題）
如何將用戶輸入保存到 HTML 和 JavaScript 中的變量中
無法從 html 獲取 javascript 中的用戶輸入
用分號javascript html分隔用戶輸入
將用戶 HTML 輸入作為 javascript function 參數傳遞
相關標簽