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

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

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

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

HTML

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

Q&A

1回答

558閲覧

html電卓一桁入力

m.aru8

総合スコア2

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2021/11/10 02:59

編集2021/11/10 03:56
<meta charset="UTF-8"> <html><body> <head> <link href="style.css" rel="stylesheet"> <script src="main.js"></script> </head> <header> <a href="/dentaku.html"><span class="kh">たしざん</span></a> <a href="./hikizan.html">ひきざん</a><br><br> </header> <!--計算表の始まり--> <div class="yoko"><div> <from name="fromR"><input style="width:100px;height:100px;font-size:100px; text-align: right; "id="tx1" /></from></div> <div><h1> + </h1></div> <div><input style="width:100px;height:100px;font-size:100px; text-align: right;"id="tx2" /><br /> </div> </div> </span> <!--計算表の終わり--> <!--りんご画像の横並びの始まり--> <style> .yoko{ display:flex; } .yoko>div{ width:auto; } </style> <!--りんご画像の横並びの終わり--> <!--りんご非表示待機の始まり--> <div class="yoko"> <div>  <!--1個--> <img src="irasuto/ringo1.png" id="r1" width="40px"></div>  <!--2個--> <div><div id="r2"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"></div></div>  <!--3個--> <div><div id="r3"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"></div></div>  <!--4個--> <div><div id="r4"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"></div></div>  <!--5個--> <div><div id="r5"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"></div></div>  <!--6個--> <div><div id="r6"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"></div></div>  <!--7個--> <div><div id="r7"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"></div></div>  <!--8個--> <div><div id="r8"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"></div></div>  <!--9個--> <div><div id="r9"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"> <img src="irasuto/ringo1.png" width="40px"></div></div> </div> <!--りんご非表示待機の終わり--> <!--りんご表示切り替え+数字入力の始まり-->  <!--1表示--> <input type="button" value="- 1 -"onclick="document.getElementById('r1'). style.visibility='visible';append('1')"> <!--2表示--> <input type="button" value="- 2 -"onclick="document.getElementById('r2'). style.visibility='visible';append('2')"> <!--3表示--> <input type="button" value="- 3 -"onclick="document.getElementById('r3'). style.visibility='visible';append('3')"> <!--4表示--> <input type="button" value="- 4 -"onclick="document.getElementById('r4'). style.visibility='visible';append('4')"> <!--5表示--> <input type="button" value="- 5 -"onclick="document.getElementById('r5'). style.visibility='visible';append('5')"> <!--6表示--> <input type="button" value="- 6 -"onclick="document.getElementById('r6'). style.visibility='visible';append('6')"> <!--7表示--> <input type="button" value="- 7 -"onclick="document.getElementById('r7'). style.visibility='visible';append('7')"> <!--8表示--> <input type="button" value="- 8 -"onclick="document.getElementById('r8'). style.visibility='visible';append('8')"> <!--9表示--> <input type="button" value="- 9 -"onclick="document.getElementById('r9'). style.visibility='visible';append('9')"> <!--りんご表示切り替え+数字入力の終わり--> <!--演算式の始まり--> <script> function update( _v ) // input tag を更新する関数 { document.querySelector( 'input' ).value = _v } function append( _v ) // 数字ボタンが押されたので数字を後ろに追加する { document.querySelector( 'input' ).value += _v } function update( _n ) // input tag を更新する関数 { document.querySelector( 'input' ).value = _n } function append( _n ) // 数字ボタンが押されたので数字を後ろに追加する { document.querySelector( 'input' ).value += _n } function calc() // 「=」ボタンが押されたので計算する { const v = document.querySelector( 'input' ).value const n = document.querySelector( 'input' ).value try { const f = new Function( 'return ' + v ) update( f().toString() ) } catch( _error ) { update( _error ) // 計算に失敗した場合は、そのエラーの内容を表示する } var input = document.getElementById(_v) var count = input.value.length console.log(count) } </script> <!--演算式の終わり--> <!--”=+ー”の表示始まり--> <button onclick="append( '+' )" >+</button> <button onclick="append( '-' )" >-</button> <button onclick="calc()" style="width:105px;">=</button> <!--”=+ー”の表示の終わり--> <!--CLRボタンの始まり--> <!--りんご非表示--> <input type="button"value="CLR"onclick=" document.getElementById('r1').style.visibility='hidden'; document.getElementById('r2').style.visibility='hidden'; document.getElementById('r3').style.visibility='hidden'; document.getElementById('r4').style.visibility='hidden'; document.getElementById('r5').style.visibility='hidden'; document.getElementById('r6').style.visibility='hidden'; document.getElementById('r7').style.visibility='hidden'; document.getElementById('r8').style.visibility='hidden'; document.getElementById('r9').style.visibility='hidden'; //数字非表示 update('')"> <!--CLRボタンの終わり--> </body></html> コード
電卓での1桁入力 入力A + 入力B <input style="width:100px;height:100px;font-size:100px; text-align: right;/> <input style="width:100px;height:100px;font-size:100px; text-align: right;/> 電卓1入力 <input type="button" value="- 1 -"onclick="append('1')"> 電卓を作成しているのですが、たしざんの一桁をAに入力したら強制的に次の入力をBにする方法がわかりません、よければ教えて欲しいです。 ### 試したこと javascript で入力回数を数えて移行 fromR.onload = function(){ var righttxet =document.getElementById('tx1'); var lefttxet = document.getElementById('tx2'); var righttxetCount = righttxet.length; if(righttxetCount == 1){ ここがわかりません } ### 補足情報(FW/ツールのバージョンなど) Mac visualstdio ここにより詳細な情報を記載してください。

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

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

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

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

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

m.aru8

2021/11/10 04:23

スペルミスです。問題ないと思われます Visual Studio Codeです
yambejp

2021/11/10 04:36

画像をつかっているならかならずaltを設定してください
guest

回答1

0

状況がわかりませんが

javascript

1<script> 2document.addEventListener('input',e=>{ 3 const t=e.target; 4 if(t.classList.contains("mae")){ 5 t.nextElementSibling.focus(); 6 } 7}); 8</script> 9<input style="width:100px;height:100px;font-size:100px; 10text-align: right;" class="mae" maxlength="1"> 11<input style="width:100px;height:100px;font-size:100px; 12text-align: right;" class="ushiro">

投稿2021/11/10 03:35

yambejp

総合スコア116724

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

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

m.aru8

2021/11/10 04:22

できませんでした。二つ目に移行しません。
yambejp

2021/11/10 04:23

サンプルをコピペして前側に文字を入れても後ろ側にフォーカスが移動しませんか?
m.aru8

2021/11/10 04:27

キーボード入力だとうまくいくのですが、ボタン入力だとうまく反応しませんでした。
yambejp

2021/11/10 04:35 編集

一旦動作するものをどこか確認できるサイトにアップしてください どういう処理をしたときにどう挙動する想定なのかも明示ください
m.aru8

2021/11/10 04:43

確認できるサイトを知らないのでできません。 処理は入力A入力Bとあり input type button append('1')1から9まであります。 で作成したボタンで数を入力Aに代入したら次の数入力はBに代入 したしざんを行う 想定です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問