Question

我刚刚开始学习代码，并且一直在尝试使用HTML，CSS和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();
}

Answer 1

您的代码中存在一些语法错误。查看下面的代码..强烈建议您查看一些基本的javascript教程。

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

＆＃13;

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

＆＃13;

<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' >

＆＃13;

Answer 2

我刚刚在我的调试器中尝试了您的代码（正如其他答案所示），第一个错误就在这里并阻止您的代码加载脚本

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

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

document.getElementById("display")

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

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

希望它有所帮助。尼古拉斯

Answer 3

这可能是您的解决方案。查看评论以了解我在那里做什么..

要了解有关JavaScript的更多信息，请尝试Codecademy - 通过dooing学习及其免费;）

＆＃13;

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'
}

＆＃13;

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

＆＃13;

获取用户输入然后按下按钮进行计算（HTML / JavaScript）

3 个答案: