前提・実現したいこと
HTML・JavaScriptでカウントアップ・ダウン処理を実装しています。
ボタンを押すと数値が変わるようにしたのですが、input要素に結果が反映されなくて困っています。
確認用として、divタグを追加して同じようにコードを書いたところ正常に動作しました。
input要素にボタンを押すとカウントアップ・ダウンした結果を反映させるにはどうしたらよいでしょうか?
→ Masakin様の回答により解決しました!
✖ total.innerHTML = count_num;
〇 total.value = count_num;
ほぼ独学と言っていいもので、実務経験がないため皆さまの知恵をお貸しください。
よろしくお願いいたします。
現状の画像
chromeのデバッグモードで確認しています。
ご覧の通り5という数値が反映されているのですがHTML上には反映されていませんでした。
ソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8" /> 5 <title>カウントアップ・ダウン</title> 6</head> 7<body> 8 <div id="now_num">0</div> 9 <input type="text" value="0" id="total" /> 10 <input type="button" value="確定" id="confirm" /> <br /> 11 <input type="button" value="+1" id="up" /> 12 <input type="button" value="-1" id="down" /> 13 14<script src="script.js"></script> 15</body> 16</html>
JavaScript
1window.onload = function(){ 2 var total = document.getElementById("total"); 3 var now_num = document.getElementById("now_num"); 4 //1つずつ増加 5 var one_up_btn = document.getElementById("up"); 6 //1つずつ減少 7 var one_down_btn = document.getElementById("down"); 8 //定義 9 var count_num = 0; 10 11 //カウントアップ処理 12 one_up.onclick = function(){ 13 count_num += 1; 14 total.innerHTML = count_num; 15 now_num.innerHTML = count_num; 16 } 17 //カウントダウン処理 18 one_down.onclick = function(){ 19 count_num += -1; 20 total.innerHTML = count_num; 21 now_num.innerHTML = count_num; 22 } 23}
備考
個人的な考えですが、HTMLとJavaScriptは分けたいのでHTML内に
(例)<input type="button" onclick="func1()" value="確定" id="confirm">というような
書き方はしておりません。長くはなりますが、上記のソースコードにしております。
個人的にはこちらの書き方が理解しやすいように感じました。
回答2件
あなたの回答
tips
プレビュー