javascript - 根据选择更新字段

Question

一直在尝试使用 html 选择和 JavaScript 和下拉列表更新字段，但我无法让它不断更改这是代码一直在尝试使用 html 选择和 JavaScript 和下拉列表更新字段，但我无法让它不断更改这是编码：

<div class="card1">
<div class="circle"></div>
<div class="content">
    <h2>Fifa 22 <div class="txt1"></div></h2>  
    <div class="select">
        <select name="fifa22" id="editions">
            <option value="Ultimate">Ultimate</option>
            <option value="Standard">Standard</option>
            <option value="Legacy">Legacy</option>
          </select>
          <img src="images/loading.png" id="loadingpng" alt="">
    </div>
    <a href="#" class="btn">Buy Now <div class="txt2"></div></a>                
</div>
<img src="images/fifaPs.jpg" id="img1" alt="">

const txt1 = document.querySelector('.txt1');
const txt2 = document.querySelector('.txt2');

txt1.innerText = 'Ultimate'
txt2.innerText = '$99.99'

var card = document.getElementById("editions");
var selectedValue = card.options[card.selectedIndex].value;

if (selectedValue == "Ultimate") {
    txt1.innerText = 'Ultimate'
    txt2.innerText = '$99.99'
}else if (selectedValue == "Standard") {
    txt1.innerText = 'Standard'
    txt2.innerText = '$59.99'
}else if (selectedValue == "Legacy") {
    txt1.innerText = 'Legacy'
    txt2.innerText = '$79.99'
}

标签： javascripthtmldom

Answer 1

您的代码不会更新，因为它只运行一次。为了让它在每次 select 元素发生某些事情时运行，您需要定义并附加一个“事件处理程序” - 一个响应事件运行的函数，例如单击。有两种方法可以将事件链接到“处理”它的函数。

1. 在 HTML 中，通过将其添加为 select 元素的属性。HTML 属性事件

    <select onchange="myHandlerFunction">

2. 在 JS 中通过.addEventListener对元素使用方法。JS dom 事件

    const card = document.getElementById("editions")
    card.addEventListener("change", "myHandlerFunction")

• 方法1更直观一点。它适用于小型工作并在您学习时使用。

• 方法 2 往往是首选，因为它将关注点和语言分开。

处理程序函数作为它们的第一个参数传递事件对象。此对象包含对触发事件的元素的引用，例如

    function myEventHandler(event){
        const selectedValue = event.target.value
        // blah blah blah
    }

如果您的项目开始需要大量事件处理程序，您应该查找“事件委托”TL；DR 使用一个大事件处理程序对 DOM 树更靠前的元素进行处理。