Q&A
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
画像も外部サービスではなくteratailの画像添付機能をご利用ください。
タイトルは要件を記載してください（起きている問題、解決したいこと）主題が大きすぎるのはよくないです。
課題のためURLのような計算フォームを作成しています
課題内容はHTMLは完成済みのためJavaScriptのみこコードを書いて計算フォームを完成させるというものですが自分で頑張って調べて
書いても計算結果が表示されない状況です
JavaScriptのなんの記述や追記や変更すれば
計算フォームができるのか教えて頂きたいです
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Calc Test</title> </head> <body> <div> <input type="text" id="num1"> <input type="text" id="num2"> </div> <button type="button" id="button-add">+</button> <button type="button" id="button-sub">-</button> <button type="button" id="button-mul">*</button> <button type="button" id="button-div">/</button> <div id="box"></div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="main.js"></script> </body> </html>JavaScript
function add(){
let num1 = document.getElementById("num1").value;
let num2 = document.getElementById("num2").value;
box = Number(num1) + Number(num2);
document.getElementById("box").innerText = box;
}
function sub(){
let num1 = document.getElementById("num1").value;
let num2 = document.getElementById("num2").value;
box = Number(num1) - Number(num2);
document.getElementById("box").innerText = box;
}
function mul(){
let num1 = document.getElementById("num1").value;
let num2 = document.getElementById("num2").value;
box = Number(num1) * Number(num2);
document.getElementById("box").innerText = box;
}
function div(){
let num1 = document.getElementById("num1").value;
let num2 = document.getElementById("num2").value;
box = Number(num1) / Number(num2);
document.getElementById("box").innerText = box;
}
</script></body></html>
あと、jQuery使わないならjQuery読み込ませる必要ないのでは・・？
もう1点
ブラウザの開発ツールのコンソールにエラー出てないか確認してください。
「デバッグ」も覚えましょう。それだけで大抵は解決できます。
かしこまりました
回答1件
ベストアンサー
あなたの回答
tips
プレビュー
