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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

Q&A

解決済

1回答

450閲覧

ユーザー入力をテキストボックスに反映させる方法

erumoa400

総合スコア14

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

0グッド

0クリップ

投稿2022/07/13 10:49

ユーザーから入力された数値を小銭に両替するプログラムを書いているのですが、calculateボタンを押してもそれぞれの値のテキストボックスに反映されません。
そもそも反映がされていないので関数ではなくjsファイルの冒頭部分が個人的におかしいと思うのですが、どこが間違っているかわからないので教えてほしいです。
よろしくお願いします。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>calculator</title> 7</head> 8<body> 9 <main> 10 <h1>両替</h1> 11 <label>数字を入力してください</label> 12 <input type="text" id="yen"> 13 <input type="button" value="calculate" id="calculate"> 14 <br><br> 15 <div>500円: <input type="text" id="fiveHundred" disabled></div> 16 <div>100円: <input type="text" id="oneHundred" disabled></div> 17 <div>50円: <input type="text" id="fifty" disabled></div> 18 <div>10円: <input type="text" id="ten" disabled></div> 19 <div>5円: <input type="text" id="five" disabled></div> 20 <div>1円: <input type="text" id="one" disabled></div> 21 <script src="calculator.js"></script> 22 </main> 23</body> 24</html>

Javascript

1const $ = selector => document.querySelector(selector); 2 3document.addEventListener("DOMContentLoaded", () => { 4 $("#calculate").addEventListener("click", evt => { 5 entry(); 6 }); 7}); 8 9const entry = function() { 10 var userInput = parseInt($("yen").value); 11 if (userInput > 9999) { 12 alert("0-9999 の値を入力してください"); 13 } else if (userInput < 0) { 14 alert("0-9999 の値を入力してください"); 15 } else { 16 change(userInput); 17 } 18}; 19 20 21const change = function(yen) { 22 var fiveHundred = 0, oneHundred = 0, fifty = 0, ten = 0, five = 0, one = 0; 23 if (yen >= 500) { 24 fiveHundred = parseInt(yen / 500); 25 yen %= 500; 26 $("fiveHundred").value = fiveHundred; 27 $("fiveHundred").disabled = true; 28 } 29 if (yen >= 100) { 30 oneHundred = parseInt(yen / 100); 31 yen %= 100; 32 $("oneHundred").value = oneHundred; 33 $("oneHundred").disabled = true; 34 } 35 if (yen >= 50) { 36 fifty = parseInt(yen / 50); 37 yen %= 50; 38 $("fifty").value = fifty; 39 $("fifty").disabled = true; 40 } 41 if (yen >= 10) { 42 ten = parseInt(yen / 10); 43 yen %= 10; 44 $("ten").value = ten; 45 $("ten").disabled = true; 46 } 47 if (yen >= 5) { 48 five = parseInt(yen / 5); 49 yen %= 5; 50 $("five").value = five; 51 $("five").disabled = true; 52 } 53 if (yen >= 1) { 54 one = parseInt(yen / 1); 55 yen %= 1; 56 $("one").value = one; 57 $("one").disabled = true; 58 } 59};

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

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

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

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

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

guest

回答1

0

ベストアンサー

この $() 関数でidを指定するときには $("#yen") のように先頭に # を付ける必要があります。

投稿2022/07/14 00:07

編集2022/07/14 00:07
int32_t

総合スコア20880

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

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

erumoa400

2022/07/26 17:42

すごく単純なミスでした... 回答ありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問