クリックしても先に出てきた button しか取得できません

document.querySelector('button') は、一番初めに見つかった button を返すからです。
2022年2月26日
ユーザー

このような場合、両方ではなく
上にある ulbutton だけが有効になるのですが
なぜなのでしょうか?

下側の ulbutton にクラスをつけることで解決はできたのですが
各要素にクラスをつけて対応するのが一般的なのでしょうか?
HTML

<div>
    <ul></ul>
    <input type="text">
    <button>add</button>
</div>

<select>
    <ul></ul>
    <option>赤</option>
    <option value="blue">青</option>
    <option value="white">白</option>
</select>
<button>選択</button>

JavaScript

document.querySelector('button').addEventListener('click', () => {
    const li = document.createElement('li');
    const color = document.querySelector('select');
    li.textContent = `${color.value} - ${color.selectedIndex}`;
    document.querySelector('ul').appendChild(li);
});

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(8)