JavaScript

Question

<p class="q-body"> <input id="q2-1" type="text"></input> × <input id="q2-2" type="text"></input> <button id="q2btn">計算</button><br> 計算結果：<span id="q2-1"></span> </p>

このhtmlに対してJavaScriptを使用して「計算」ボタンをクリックすると，『計算結果：』の横に２つの数値をかけた数値が表示されるようなプログラムを作りたいのですがどうしたらいいかわからないです。valueとparseFloatを使うのかと思っているのですが教えていただきたです。

Comments

[masaya_ohashi]

valueとparseFloatまで予想がついているなら、自分で考えたコードを例え動かない状態であっても記載するべきです。1から10まで教えては課題の意味がありません。

[m.ts10806]

https://teratail.com/help/question-tips#questionTips3-1 https://teratail.com/help/question-tips#questionTips3-5

Answer 1

id="q2-1"がかぶってます

window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector("#q2btn").addEventListener('click',function(e){
    var v1=parseFloat(document.querySelector("#q2-1").value)||0;
    var v2=parseFloat(document.querySelector("#q2-2").value)||0;
    document.querySelector("#q2-3").innerHTML=v1*v2;
  });
});

<p class="q-body">
<input id="q2-1" type="text">
×
<input id="q2-2" type="text">
<button id="q2btn">計算</button><br>
計算結果：<span id="q2-3"></span>
</p>