DOMの入力テキストから値を取得できません

Question

私はWeb開発者には新しく、最近はDOMを学習しています。 しかし、私は私を悩ませていた問題があります。 私は、ユーザーが半径を入力することで球の体積を得ることができる単純な球の体積の計算をしようとしています。

ここにコードがあります。

HTML

Enter the sphere radius : <input type="number" id="radius"> 
<button id=>Calculate !</button> 
<p>Therefore, the volume of sphere are: <span id="volsphere"></span> </p> 

JS

var radius = document.querySelector("#radius"); 
var volsphere = document.querySelector("#volsphere"); 

volsphere.addEventListener("click",function(){ 
    //calculate the sphere volume 
    var spherevolume = (4/3) * Math.PI * Math.pow(radius,3); 
    //put the text content into sphere volume 
    volsphere.textContent = spherevolume ; 
}); 

私は、コンソールログradius.valueとspherevolume.valueのトラブルシューティングを行うことにより、それを作業してみてください。

半径は罰金、私は「3」が、球のボリュームがこのエラーを配っているコードの一部だから、

VM97:1 Uncaught ReferenceError: spherevolume is not defined at :1:1

のこのエラーメッセージを、持っている与えるように見えましたか？ 助けていただきありがとうございます

Answer 1

問題は、HTMLElementに値を加えていないことです。そのようなので、半径後.valueを追加します。

var spherevolume = (4/3) * Math.PI * Math.pow(radius.value, 3); 

残念ながら、これは非常に数に変換し、文字列ではなく数を返します、あなたはparseInt()でそれを包むかに変身するためにそれを強制することができどちらか（すなわち、それを0で引く）。サイドノートで

var spherevolume = (4/3) * Math.PI * Math.pow(parseInt(radius.value), 3); 

それとも

var spherevolume = (4/3) * Math.PI * Math.pow(radius.value - 0, 3); 

、あなたはおそらくspan上buttonないでEventListenerを追加する必要があります。私はあなたがそれをしなかったと仮定しています。なぜならすべてがフォームにあり、ページをリダイレクトしていたからです。あなたはevent.preventDefault();

var button = document.querySelector("#radius+button"); 

button.addEventListener("click", function(event){ 
    var spherevolume = (4/3) * Math.PI * Math.pow(parseInt(radius.value), 3); 
    volsphere.textContent = spherevolume; 
    event.preventDefault(); 
});