JavaScript-基于选择更新字段-堆栈溢出

顺晟科技

2022-10-19 13:55:56

194

一直试图使用html、select、JavaScript和下拉菜单更新字段，但我无法使其不断变化这是代码我一直试图使用html、select和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="">

<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="">

顺晟科技：

您的代码没有更新，因为它只运行一次。为了使select元素每次发生问题时都能运行，您需要定义并附加一个“事件处理程序”--一个响应事件运行的函数，比如单击。有两种方法可以将事件链接到“处理”它的函数。

通过将其作为select元素的属性添加到HTML中。HTML属性事件

在JS中使用元素上的方法。JS dom事件

方法1更直观一点。对于微小的工作和在学习时使用都是可以的。
方法2往往是首选，因为它将关注点和语言分开。

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

如果您的项目开始需要大量事件处理程序，您应该在DOM树更高的元素上使用一个大事件处理程序来查找“事件委托”tl；dr。

始终首先运行JS脚本。所以您的代码实际上没有响应任何事件。您需要一个作为事件侦听器。总是传递一个参数，您可以使用它来获取您要查找的值。

还请注意，默认情况下，属性可用于选择选项。所以不需要在JS中为此编写代码。保持简单。

<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="">

<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="">

上一篇：html-bootstrap主题没有下一篇：HTML-刷新页面堆栈溢出后，视频上

网站建设

Html

JavaScript-基于选择更新字段-堆栈溢出