Q&A
writeからの値取得はclick時とすればどうなりますか？
$('#addbtn').click(function() {
let val = $('#write').val();
console.log(val);
$('#ul').prepend(`<li>${val}</li>`);
});
inputのテキストエリアに書かれた文を変数valに入れて、それをli要素として反映させたいのですが、ボタンを押してもliの中に何も書かれません。試しにconsole.log(val);を書いてみたところ空白が出力されたので、おそらくhtml側が悪いのだと思います。どのようにすればうまくいくのでしょうか？
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>todo</title> 8 <link rel="stylesheet" href="css/reset.css"> 9 <link rel="stylesheet" href="css/style.css"> 10</head> 11 12<body> 13 <div class="container"> 14 <ul id="ul"></ul> 15 <div class="input"> 16 <input id="write" type="text"> 17 <button id="addbtn">追加</button> 18 </div> 19 </div> 20 21 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 22 <script src="js/script.js"></script> 23</body> 24 25</html>
sass
1.container { 2 max-width: 1200px; 3 margin: 0 auto; 4 padding-left: 20px; 5} 6 7.input { 8 input { 9 border: 1px solid; 10 } 11}
javascript
1let val = $('#write').val(); 2 3$('#addbtn').click(function() { 4 console.log(val); 5 $('#ul').prepend(`<li>${val}</li>`); 6});
回答2件
0
ベストアンサー
javascript
1let val = $('#write').val();
この文において
変数「val」は「idがwriteの値を参照する」ようにしてという意味ではなく
変数「val」に「idがwriteの今の値を代入する」という意味だと思ってください。
val()をclickイベント内で実行するようにすれば感覚的には近くなると思います。
let val = $('#write'); $('#addbtn').click(function() { console.log(val.val()); $('#ul').prepend(`<li>${val.val()}</li>`); });
この場合はvalという変数名は不適切ですね
let write = $('#write'); $('#addbtn').click(function() { console.log(write.val()); $('#ul').prepend(`<li>${write.val()}</li>`); });
投稿2021/02/19 07:53
総合スコア3830
0
提示されているJavaScriptコードが js/script.js だとすると、変数 val はページロード時に1度だけ代入されて、以後変更されません。なので空文字列のままです。
クリックハンドラの中で値を取得すればよいでしょう。
javascript
1$('#addbtn').click(function() { 2 let val = $('#write').val(); 3 console.log(val); 4 $('#ul').prepend(`<li>${val}</li>`); 5});
投稿2021/02/19 07:29
総合スコア21679
あなたの回答
tips
プレビュー
