如何在 HTML 中插入变量

Question

我正在尝试在 HTML + JavaScript 中编写以下类型的表单/决策树：

问题1：你来自哪个国家？ 答案 1：意大利 答案 2：日本 ...

Q2：你喜欢什么？ if Q1 = 意大利，A1 = 我喜欢猫，A2 = 我喜欢音乐 if Q1 = 日本，A1 = 我喜欢狗，A2 = 我喜欢运动

Q3：你几岁了？ A1 = 13 A2 = 57

结果：取决于选择的答案

我确实成功地对表单进行了编码并包含了不同的结果。 现在我的挑战是根据 Q1 的答案显示 Q2 的不同选项。

我的问题看起来像这样，用 HTML 编写：

<div id="question_2" hidden>
 <label>what do you like?</label>
  <select id="question_2">
          <option value="hello">i like cats</option>
          <option value="goodbye">i like music</option>
          <option disabled selected="selected"></option>
  </select>
</div>

我使用一个用 JS 编写的函数作为决策树逻辑。

if Q1 = Japan, A1 = i like dogs, A2 = i like sport ，我想添加这些选项； 最好在 HTML 中。 我想过使用变量，并有类似的东西：

<div id="question_2" hidden>
 <label>what do you like?</label>
  <select id="question_2">
          <option value="hello">i like ${x}</option>
          <option value="goodbye">i like ${y}</option>
          <option disabled selected="selected"></option>
  </select>
</div>

有了这个逻辑，最好用 JS 编写：

if Q1 = A1, then x = cat and y = music
if Q1 = A2, then x = dogs and y = sport

这可能吗？ 关于看什么的任何提示？ 我是初学者。 非常感谢。

Answer 1

您可以分别为日本和意大利这两个选项写两个问题。 然后使用 Javascript 函数，如果用户选择意大利，该函数将使与意大利对应的问题可见。 否则，如果用户选择日本，则会出现另一个问题。 如果用户既没有选择日本也没有选择意大利，那么这两个问题都将不可见。

在 Javascript 函数中，您可以将style.display属性设置为none使任何问题 (div) 不可见或将其设置为block以使问题 (div) 可见。

HTML

<div>
  <label>from which country are you?</label>
  <select id="question_1" onchange="showDiv(this)">
          <option value="italy">italy</option>
          <option value="japan">Japan</option>
          <option disabled selected="selected"></option>
  </select>
</div>

<div  class = "hidden_div">
 <label>what do you like?</label>
  <select id="question_2_italy">
          <option value="hello">i like cats</option>
          <option value="goodbye">i like Music</option>
          <option disabled selected="selected"></option>
  </select>
</div>

<div  class = "hidden_div">
 <label>what do you like?</label>
  <select id="question_3_japan">
          <option value="hello">i like dogs</option>
          <option value="goodbye"> i like sport</option>
          <option disabled selected="selected"></option>
  </select>
</div>

CSS

.hidden_div{
    display: none;
}

JS

function showDiv(element)
{
         
       for ( var i = 0, len = element.options.length; i < len; i++ ) {
            opt = element.options[i];
           
            if ( opt.selected === true ) {
                document.getElementsByClassName("hidden_div")[i].style.display = 'block';
            }
            else {
                    document.getElementsByClassName("hidden_div")[i].style.display = 'none';
            }
            
     }
}