html - 如何编写读取输入并生成字符串组合作为输出的 HTML 代码？

Question

假设我有两个下拉输入字段。第一个下拉列表包含 1 到 4 个数字。第二个下拉列表由 A、B、C 和 D 组成。当用户从两个下拉列表中选择他/她的选择并单击“提交”时，将显示输出文本。例如：

下拉1：

1 -- Bad
2 -- Good
3 -- Great
4 -- Perfect

下拉菜单 2：

A -- Boy
B -- Girl
C -- Man
D -- Woman

如果用户分别选择 2 和 C 并单击提交，输出文本将显示“Good Man”。
如何通过使用 HTML 代码来实现这一点？

标签： htmlstring

Answer 1

这是我的示例代码，您可以从这里开始工作。

Codepen：https ://codepen.io/DieByMacro/pen/WBdzbp?editors=1111

(function() {
  const firstSelect = document.querySelector('#first-select');
  const secondSelect = document.querySelector('#second-select');
  const btnSubmit = document.querySelector('#submit');
  
  function selectChangeHandler(event) {
    console.log(event.target.value);
  }
  
  function clickHandler() {
    const value1 = document.querySelector('#first-select').value;
    const value2 = document.querySelector('#second-select').value;
    const result = document.querySelector('#result')
    result.innerText = `Selected ${value1} ${value2}`
  }
  
  firstSelect.addEventListener('change', selectChangeHandler )
  secondSelect.addEventListener('change', selectChangeHandler )
  btnSubmit.addEventListener('click', clickHandler )
})()

<select id="first-select">
  <option value="Good">Good</option>
  <option value="Bad">Bad</option>
</select>

<select id="second-select">
  <option value="Boy">Boy</option>
  <option value="Girl">Girl</option>
</select>

<button id="submit">Submit</button>

<div id="result"></div>