Q&A
＞val = numVal;
ここのことでしょうか。
変数に変数を入れているだけで、inputのvalueに入れてるコードにはなってませんが・・
質問失礼いたします。現在javascriptで電卓を作成しています。
そこで行き詰ったところが、クリックした数字をinputのvalue属性に反映させ、表示させるという動作です。
自分は、jsでinputのvalue属性を取得し、それにクリックした要素のtextContent(今回は数字)を代入することを試みました。
しかし、value属性に数字は反映されなかったです。これは何が原因で反映されないのでしょうか。
初歩的な質問で恐れ入りますが、ご教授おお願いいたします。
html
1<!DOCTYPE html> 2<html lang="js"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="css/style.css"> 8 <link rel="stylesheet" href="css/reset.css"> 9 <title>Document</title> 10</head> 11<body> 12 13 <div class="eval-wrapper"> 14 <div class="eval-ttl">電 卓</div> 15 <div class="eval-content"> 16 <input type="text" value="0" name="eval" class="input" placeholder=""> 17 <div class="c" id="sign">C</div> 18 </div> 19 <div class="eval-signs"> 20 <ul class="eval-list"> 21 <li class="eval-item1 number" id="sign">7</li> 22 <li class="eval-item2 number" id="sign">8</li> 23 <li class="eval-item3 number" id="sign">9</li> 24 <li class="eval-item4" id="sign">÷</li> 25 <li class="eval-item5 number" id="sign">4</li> 26 <li class="eval-item6 number" id="sign">5</li> 27 <li class="eval-item7 number" id="sign">6</li> 28 <li class="eval-item8" id="sign">×</li> 29 <li class="eval-item9 number" id="sign">1</li> 30 <li class="eval-item10 number" id="sign">2</li> 31 <li class="eval-item11 number" id="sign">3</li> 32 <li class="eval-item12" id="sign">-</li> 33 <li class="eval-item13 number" id="sign">0</li> 34 <li class="eval-item14" id="sign">.</li> 35 <li class="eval-item15" id="sign">+</li> 36 <li class="eval-item16" id="sign">=</li> 37 </ul> 38 </div> 39 </div> 40 41 42 43 44 <script src="js/main.js"></script> 45</body> 46</html>
js
1 2(function(){ 3 4 5 let num = document.querySelectorAll('.number') 6 7 num.forEach((num) => { 8 num.addEventListener('click',function(e){ 9 let val = document.querySelector('.input').defaultValue; 10 let numVal = e.currentTarget.textContent; 11 val = numVal; 12 console.log(val); 13 14 15 16 }); 17 }); 18 19})();
回答2件
0
とりあえず数字を押したらvalueの後ろに数字が記載されればよいという仕様ですね
（計算機としては多々問題がありますが、プロと段階ということで）
- idの使い方がおかしい
- textContentからデータを持ってくるのはブレが大きい
などを考慮するとカスタムデータを使ってこんな感じにしたほうがよいかも
javascript
1<style> 2.eval-list{ 3display:flex; 4 flex-wrap:wrap; 5 justify-content:space-between; 6padding:0; 7} 8.eval-wrapper{ 9width:200px; 10} 11.sign{ 12width:22%; 13display:block; 14border:solid 1px black; 15border-radius:5px; 16text-align:center; 17} 18</style> 19<script> 20document.addEventListener('click',e=>{ 21 const t=e.target; 22 if(t.closest('[data-number]')){ 23 document.querySelector('[name=eval]').value+=t.dataset.number; 24 } 25}); 26</script> 27<div class="eval-wrapper"> 28 <div class="eval-ttl">電 卓</div> 29 <div class="eval-content"> 30 <input type="text" value="0" name="eval" class="input" placeholder=""> 31 <div class="sign" id="c">C</div> 32 </div> 33 <div class="eval-signs"> 34 <ul class="eval-list"> 35 <li class="sign" data-number="7">7</li> 36 <li class="sign" data-number="8">8</li> 37 <li class="sign" data-number="9">9</li> 38 <li class="sign" >÷</li> 39 <li class="sign" data-number="4">4</li> 40 <li class="sign" data-number="5">5</li> 41 <li class="sign" data-number="6">6</li> 42 <li class="sign" >×</li> 43 <li class="sign" data-number="1">1</li> 44 <li class="sign" data-number="2">2</li> 45 <li class="sign" data-number="3">3</li> 46 <li class="sign" >-</li> 47 <li class="sign" data-number="0">0</li> 48 <li class="sign" >.</li> 49 <li class="sign" >+</li> 50 <li class="sign" >=</li> 51 </ul> 52 </div> 53</div> 54
投稿2021/11/26 00:55
総合スコア116835
0
js
1let val = document.querySelector('.input').defaultValue;
変数 val には、<input>の初期値の文字列のコピーが入ります。変数 val を書き換えても変数 val の参照先が変わるだけで、<input> に影響を与えません。
js
1document.querySelector('.input').value = e.currentTarget.textContent;
としたいのだと思います。
投稿2021/11/25 12:26
総合スコア21756
あなたの回答
tips
プレビュー
