Q&A
質問者様のコードをコピペしただけなのですが、正常に動作しているようです。
動作確認用サンプル→ https://jsfiddle.net/z4kmf68x/
前提
JavaScriptで「"りんご"と入力されたらフォーカスを外す機能」と「"りんご"と入力された後にフォーカスを外すと隣の数字が100になる機能」を用意しました。
実現したいこと
それぞれ一つずつであれば正常に機能するのですが、同時に実装すると後者のみ機能しなくなります。要するに"りんご"と入力したらフォーカスを外しつつ100と入力されるようにしたいです。
原因、解決法として何が考えられるでしょうか？
該当のソースコード
HTML
1<html> 2<head> 3 <meta charset="utf-8"> 4 <script src="script.js"></script> 5</head> 6<body> 7 <input type="text" id="fruit" onkeyup="func1()"> 8 <input type="text" id="number" value="0"> 9</body> 10</html>
JavaScript
1const fruit = document.getElementById("fruit"); 2const func1 = () => { 3 const elem = document.activeElement; 4 if(elem.value == 'りんご') { 5 elem.blur(); 6 } 7} 8 9window.addEventListener('DOMContentLoaded', ()=>{ 10 const list={"りんご":100}; 11 fruit.addEventListener('change',e=>{ 12 if(list[fruit.value]){ 13 number.value=list[fruit.value]; 14 } 15 }); 16});
回答2件
0
ベストアンサー
javascript
1<script> 2document.addEventListener('input',e=>{ 3 if(e.target.matches('#fruit') && fruit.value=="りんご"){ 4 number.value=100; 5 fruit.blur(); 6 } 7}); 8</script> 9<input type="text" id="fruit"> 10<input type="text" id="number" value="0">
投稿2022/12/30 07:36
総合スコア117665
0
HTMLは上から順番に処理されるということで、scriptタグも同様です。
<head>部にあるscriptタグは最初の段階で読み込まれます。 この時点ではhtmlは読み込まれていません。 なので<body>の内容は無視されています。HTML
1<input type="text" id="fruit" onkeyup="func1()"> 2<!-- このタグが動いたのはonkeyupのせいです。-->
なのでscriptタグの場所はbodyの閉じタグの前に置くか、srcの前にasyncなどを入れるのが普通です。
DOMContentLoadedは使わなくて大丈夫です。
投稿2022/12/30 07:25
総合スコア12
あなたの回答
tips
プレビュー
