ユーザー入力をしてからボタンを押す（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'関数の外側で –

これはあなたにとって解決策です。

Codecademyを試してみてくださいJavaScriptの詳細については..私はそこdooingてるかを理解するためのコメントを確認 - 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）

答えて

関連する問題