接受用户输入，然后通过按钮进行计算（HTML/JavaScript）

我刚刚开始学习代码，并试图从头开始使用HTML，CSS和JavaScript构建基本的Web设计。接受用户输入，然后通过按钮进行计算（HTML/JavaScript）

我想要发生的是有一个盒子，你把你的身高英寸，然后点击一个按钮来计算，然后它显示你的身高除以7。我的问题是，计算按钮什么都不显示。这里是我的HTML代码：

<!DOCTYPEhtml> 
<html lang="en-US"> 
<!--A banana is about 7 inches --> 
<head> 
    <script type='text/javascript' src='script.js'></script> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
    <title> Banana For Scale </title> 
</head> 
<body> 
    <div class="question"> 
     <h1> How many bananas tall are you? </h1> 
    </div> 
    <div class=number-input> 
     <p>Enter your height in inches. </p> 
     <input type="number" id='myNumber'> 
    </div> 
    <div class='button'> 
     <button onclick="myCalculation()">Calculate</button> 
    </div> 
    <div class='answer'> 
     <p id='display'></p> 
     <img class='banana' src="https://pajamasmed.hs.llnwd.net/e1/trending/user- 
    content/51/files/2017/03/bananas-03.jpg" alt='banana'> 
</body> 
</html>

这里是我的代码位于的script.js：

var bananaHeight() = document.getElementById("myNumber"/7); 

function myCalculation() { 
    document.getElementById("display") = bananaHeight(); 
}

来源

2017-04-18 DeathPox

为什么你选择把'/ 7'放在那里吗？你为什么认为'var bananaHeight（）= ...'是正确的？ –

我相信你可以使用浏览器中的调试工具或通过阅读一些基本教程来了解这一点。 – George

除非你的元素的ID是'NaN'，那么我建议把''myNumber''变成一个数字而不是一个字符串，并且移动'getElementById'函数外面的'/ 7'调用 –

这可能是一个解决方案。检查意见，了解我dooing有..

要了解更多关于JavaScript的尝试Codecademy - 由dooing其自由学习;）

function myCalculation(){ 
 
    var bananaHeight = document.getElementById('myNumber').value/7; // Get the Inputvalue and do your calculation (/7) 
 
    document.getElementById('display').innerHTML = bananaHeight;  // display the result of your calculation inside the <p>-Element with the id 'display' 
 
}

<body> 
 
    <div class="question"> 
 
    <h1> How many bananas tall are you? </h1> 
 
    </div> 
 
    <div class=number-input> 
 
    <p>Enter your height in inches. </p> 
 
    <input type="number" id='myNumber'> 
 
    </div> 
 
    <div class='button'> 
 
    <button onclick="myCalculation()">Calculate</button> 
 
    </div> 
 
    <div class='answer'> 
 
    <p id='display'></p> 
 
    <img class='banana' src="https://pajamasmed.hs.llnwd.net/e1/trending/user- 
 
content/51/files/2017/03/bananas-03.jpg" alt='banana'> 
 
</body>

来源

2017-04-18 14:16:04

有在你的代码中的一些语法错误。看看下面的代码..我强烈建议你看看一些基本的JavaScript教程。

https://www.w3schools.com/js/js_htmldom.asp

var bananaHeight = function(){ 
 
return (document.getElementById("myNumber").value/7); 
 
}; 
 

 
function myCalculation() { 
 
document.getElementById("display").innerHTML = bananaHeight(); 
 
}

<div class="question"> 
 
<h1> How many bananas tall are you? </h1> 
 
</div> 
 
<div class=number-input> 
 
<p>Enter your height in inches. </p> 
 
<input type="number" id='myNumber'> 
 
</div> 
 
<div class='button'> 
 
<button onclick="myCalculation()">Calculate</button> 
 
</div> 
 
<div class='answer'> 
 
<p id='display'></p> 
 
<img class='banana' 
 
src="https://pajamasmed.hs.llnwd.net/e1/trending/user- 
 
content/51/files/2017/03/bananas-03.jpg" alt='banana' >

来源

2017-04-18 14:09:31 lhavCoder

我只是想你的代码在我的调试器（如其他答案建议）和第一个错误是在这里，可以防止您的代码加载脚本

var bananaHeight() = document.getElementById("myNumber"/7);

接下来，您尝试将bananaHeight的结果分配给另一个函数

document.getElementById("display")

这不会返回一个可编辑的对象。你应该使用innerHtml，像这样

document.getElementById("display").innerHTML = bananaHeight;

希望它有帮助。 Nicolas

来源

2017-04-18 14:14:28 nicolasdaudin

接受用户输入，然后通过按钮进行计算（HTML/JavaScript）

回答

相关问题