一直在嘗試使用 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="">
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'
}
uj5u.com熱心網友回復：
您的代碼不會更新，因為它只運行一次。為了讓它每次在 select 元素發生某些事情時都運行，您需要定義并附加一個“事件處理程式”——一個回應事件而運行的函式，比如點擊。有兩種方法可以將事件鏈接到“處理”它的函式。
- 在 HTML 中通過將其添加為 select 元素的屬性。HTML 屬性事件
<select onchange="myHandlerFunction">
- 在 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 樹的更上方元素上使用一個大事件處理程式。
uj5u.com熱心網友回復：
JS 腳本總是首先運行。所以你的代碼實際上沒有回應任何事件。為此，您需要一個function作為事件偵聽器。引數event始終傳遞給eventListeners，您可以使用它來獲取您要查找的值。
另請注意，該屬性selected可用于默認選擇選項。因此無需在您的 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" onchange="selectChange()">
<option value="Ultimate" selected>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");
function selectChange(event) {
var selectedValue = event.target.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'
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/327704.html
標籤：javascript html dom