获取用户输入,然后通过按下按钮进行计算(HTML/JavaScript)

获取用户输入,然后通过按下按钮进行计算(HTML/JavaScript),javascript,html,Javascript,Html,我几天前刚开始学习代码,一直在尝试使用HTML、CSS和JavaScript从头开始构建基本的web设计 我想做的是有一个框,你把你的身高以英寸为单位,然后点击一个按钮来计算,然后它显示你的身高除以7。我的问题是“计算”按钮不显示任何内容。以下是我的HTML代码: <!DOCTYPEhtml> <html lang="en-US"> <!--A banana is about 7 inches --> <head> <script t

我几天前刚开始学习代码,一直在尝试使用HTML、CSS和JavaScript从头开始构建基本的web设计

我想做的是有一个框,你把你的身高以英寸为单位,然后点击一个按钮来计算,然后它显示你的身高除以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>

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

var bananaHeight=函数{ return document.getElementByIdmyNumber.value/7; }; 函数myCalculation{ document.getElementByIddisplay.innerHTML=bananaHeight; } 你有多少香蕉高? 以英寸为单位输入您的身高

计算


我刚刚按照其他答案的建议在我的调试器中尝试了你的代码,第一个错误就在这里,它阻止了你的代码加载脚本

var bananaHeight() = document.getElementById("myNumber" / 7);
接下来,尝试将bananaHeight的结果分配给另一个函数

document.getElementById("display")
这不会返回可编辑对象。您应该使用innerHtml,如下所示

document.getElementById("display").innerHTML = bananaHeight;
希望能有帮助。
尼古拉斯

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

要了解更多有关JavaScript的信息,请尝试通过dooing进行学习并免费下载

函数myCalculation{ var bananaHeight=document.getElementById'myNumber'.value/7;//获取Inputvalue并进行计算/7 document.getElementById'display'.innerHTML=bananaHeight;//在id为'display'的-元素中显示计算结果 } 你有多少香蕉高? 以英寸为单位输入您的身高

计算


你为什么选择把/7放在那里?你为什么相信var bananaHeight=。。。是吗?我相信您可以使用浏览器中的调试工具或阅读一些基本教程来解决这个问题。除非您的元素id为NaN,否则我建议将myNumber设置为数字而不是字符串,并将/7移到getElementById函数调用之外,以从需要记录的输入元素中获取值;得到值后,可以将其除以7,document.getElementById'id'.value/7。接下来,您将尝试声明一个变量,同时尝试执行函数调用?瓦巴纳赫特
document.getElementById("display").innerHTML = bananaHeight;