質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

6836閲覧

input value javascriptで変更できない

koko122102

総合スコア39

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2021/11/25 10:00

質問失礼いたします。現在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})();

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/11/25 10:58

>val = numVal; ここのことでしょうか。 変数に変数を入れているだけで、inputのvalueに入れてるコードにはなってませんが・・
guest

回答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

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

int32_t

総合スコア20670

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問