【javascript】変数にいれたタグの属性を変更するにはどうしたら良いでしょうか？

inputタグの値を自動入力するスクリプトを書きたいと思います。

例えば、下記の様なHTMLがあるとします。
同じ要素が複数ある場合、最初の要素で指定した要素を元にしたい場合です。

<input id="first_zip" type="text" name="１人目の郵便番号">
<select id="mode">
   <option value="1">1人目と同じ</option>
   <option value="1">直接入力</option>
</select>
<input id="second_zip" type="text" name="２人目の郵便番号">

selectのイベントは省きますが、次の様に処理を書くと値が代入されません。

let modeList = document.getElementById('mode');

modeList.addEventListener('change', function(e){
  let sample = document.getElementById('second_zip')
  if(! sample.value) {
    sample.value = document.getElementById('first_zip').value
  }  
});

下記の様に、直接要素を指定すれば代入されます。

if(! document.getElementbyId('second_zip').value) {
  document.getElementbyId('second_zip').value = document.getElementbyId('first_zip').value   
}

jQueryであれば下記の様なことは出来たと思いますが、
素のjavascriptの場合は指定したタグの参照は保持は出来ないのでしょうか？

$sample = $('#sample')
$('#sample').val('値代入')

maisumakun

2020/07/20 07:43

> inputタグの値を自動入力するスクリプトを書きたいと思います。どのような状況で書きたいのでしょうか？（HTMLを構築できる状況であれば、最初から<input>にvalueを与える、というほうが自然に思えます）

hasshy

2020/07/20 07:53

ご指摘ありがとうございます。状況について追記いたしました。

miyabi_pudding

2020/07/20 11:06

・#sample要素がHTMLの中に見当たりませんので、記載おねがいします。・if(! sample.value) { の条件内を通っているか確認して下さい。

hasshy

2020/07/23 10:06

ご指摘ありがとうございます。追記いたしました。 > ・if(! sample.value) { これは正常に判定できました。

行動規範の内容に同意します

回答2件

ベストアンサー

今、外出中なので確認してないのですが
!sample.valueでは駄目な気がします。
sample.value.length == 0 や
sample.value.value == ""

なら恐らく大丈夫だと思います。

帰宅して確かめてみました。下記コードで問題なく動作したので
!sample.valueでもOKでした。
なので問題があるとしたら、
省略されたselectイベントに問題がある可能性が高いと思われます。
let sample = document.getElementById('second_zip'); の位置が悪いなど
もう一つ気になったのは、document.getElementbyIdとｂがBじゃなかったことくらいです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <title>test</title>
7</head>
8
9<body>
10  <input id="first_zip" type="text" name="１人目の郵便番号" value="test">
11  <input id="second_zip" type="text" name="２人目の郵便番号">
12  <script>
13    let sample = document.getElementById('second_zip');
14    if (!sample.value) {
15      sample.value = document.getElementById('first_zip').value;
16    }
17  </script>
18</body>
19
20</html>

投稿2020/07/20 07:48

編集2020/07/20 09:27

Jon_do

総合スコア1373

hasshy

2020/07/20 08:55

ご回答いただきありがとうございます。参考にさせていただきます。

hasshy

2020/07/23 10:09

ご連絡が遅れてしまい失礼しました。ご確認いただきありがとうございます。また、typoについては失礼いたしました。検証のためにCodePenで一からコードを書いてみたところ解決できましたので、もしかしたら元のソースの他の部分に原因があったのかもしれません。おっしゃる通り、何か誤記があるかもしれません。ご指摘いただきありがとうございます。

行動規範の内容に同意します

流れ的にはこんな感じですかね？

投稿2020/07/20 08:03

yambejp

総合スコア116724

yambejp

2020/07/20 08:03

$(function(){ $('#first_zip').on('input',function(){ if($('#mode').val()==="1"){ $('#second_zip').val($(this).val()); } }); $('#mode').on('change',function(){ $('#second_zip').prop('readonly',$('#mode').val()==="1"); $('#first_zip').trigger('input'); }); });

hasshy

2020/07/20 08:54

ご回答いただきありがとうございます。素のjavascriptの場合はセレクタの参照を保持できるのでしょうか？

行動規範の内容に同意します

あなたの回答