如何将 select
选项与 array
项相互关联并在单击按钮时更改内容?
我想使用选择选项和按钮动态更改 div 的内容。我想显示的单词排列在一个数组中。
这是我的代码:
function myCall() {
var dBox = document.getElementById('displayBox');
var msg = ["Good", "Fine", "Helpful", "Fantastic"];
dBox.innerHTML = `${msg[2]}!`;
}
#displyBox {
color: #fff;
font-size: 24px;
text-align: center;
background-color: #00d500;
border-radius: 5px;
padding: 20px;
font-weight: 800;
margin-bottom: 14px;
}
<div id="displayBox">Change Words!</div>
<select>
<option>Good</option>
<option>Fine</option>
<option selected>Helpful</option>
<option>Fantastic</option>
</select>
<button type="button" onclick="myCall()">Change Word</button>
答案 0 :(得分:1)
Owner
事件"change"
处理程序。 JS 和 CSS 应该在各自的标签/文件中。on*
const EL_box = document.querySelector("#box");
const EL_words = document.querySelector("#words");
const populateBox = () => {
EL_box.innerHTML = EL_words.value;
};
EL_words.addEventListener("change", populateBox); // on change
populateBox(); // on init
#box {
color: #fff;
font-size: 24px;
text-align: center;
background-color: #00d500;
border-radius: 5px;
padding: 20px;
font-weight: 800;
margin-bottom: 14px;
}
如果你真的需要一个按钮:
<div id="box">Change Words</div>
<select id="words">
<option>Good</option>
<option>Fine</option>
<option selected>Helpful</option>
<option>Fantastic</option>
</select>
const EL_box = document.querySelector("#box");
const EL_words = document.querySelector("#words");
const EL_change = document.querySelector("#change");
const populateBox = () => {
EL_box.innerHTML = EL_words.value;
};
EL_change.addEventListener("click", populateBox); // on click
populateBox(); // on init
#box {
color: #fff;
font-size: 24px;
text-align: center;
background-color: #00d500;
border-radius: 5px;
padding: 20px;
font-weight: 800;
margin-bottom: 14px;
}
答案 1 :(得分:1)
这是工作示例:
首先,将 value 属性与标签一起使用很重要,例如:
<div id="displyBox">Change Words!</div>
<select id="selectbox">
<option value="Good">Good</option>
<option value="Fine">Fine</option>
<option value="Helpful" selected>Helpful</option>
<option value="Fantastic">Fantastic</option>
</select>
<button type="button" id="buttonChange">Change Word</button>
我更喜欢使用 addEventListener 而不是“onclick”属性。它划分了您的视图和业务逻辑层,使代码更加干练和清晰:)
那么,看看js:
const displyBox = document.getElementById('displyBox')
const buttonChange = document.getElementById('buttonChange')
const selectbox = document.getElementById('selectbox')
buttonChange.addEventListener('click', () => {
displyBox.innerHTML=selectbox.value
})
将每个重要的 html-node 链接到 js 常量。将 eventListener 添加到您的 html-button 节点并在内部传递回调函数。回调函数根据实际的选择框值更改您需要的innerHTML 属性标签。
这是 codepen 的工作示例: https://codepen.io/zaslavskij/pen/mdWPMRg
答案 2 :(得分:1)
您需要像这样在您的选择中添加一个 id...
function myCall() {
var dBox = document.getElementById('displyBox');
var msg = ["Good", "Fine", "Helpful", "Fantastic"];
dBox.innerHTML = `${msg[document.getElementById('select').selectedIndex]}!`;
}
#displyBox {
color: #fff;
font-size: 24px;
text-align: center;
background-color: #00d500;
border-radius: 5px;
padding: 20px;
font-weight: 800;
margin-bottom: 14px;
}
<div id="displyBox">Change Words!</div>
<select id = "select">
<option>Good</option>
<option>Fine</option>
<option>Helpful</option>
<option>Fantastic</option>
</select>
<button type="button" onclick="myCall()">Change Word</button>
答案 3 :(得分:-1)
<option value=0>Good</option>
<select>
获取值以在按钮点击时进行更改。
检查以下代码,如 document.getElementById('vals').value
${msg[selectedVal]}
function myCall() {
var dBox = document.getElementById('displyBox');
let selectedVal = document.getElementById('vals').value
var msg = ["Good", "Fine", "Helpful", "Fantastic"];
dBox.innerHTML = `${msg[selectedVal]}!`;
}
<div id="displyBox">Change Words!</div>
<select id="vals">
<option value=0>Good</option>
<option value=1>Fine</option>
<option selected value=2>Helpful</option>
<option value=3>Fantastic</option>
</select>
<button type="button" onclick="myCall()">Change Word</button>