javascript - 我正在为我的学校项目创建一个模型电影网站。我有一些与 "select"表单和 JavaScript 代码相关的问题

Question

所以我现在正在创建一个下拉列表来为演出选择一组日期、时间和房子。我在列表中有三个选项，即“--Choose date, time and house--”、“20 Aug 2019, 11:30 am, House 1”和“22 Aug 2019, 4:30 pm, House 2” .但是，提交时每个选项的预期结果并未实现。 (对于上下文，EP 是电影名称的首​​字母。)

我试过使用单独的 if 语句而不是 if else 语句，但这都没有帮助。

<form onsubmit= recordEPDateTime()>
    <select  id="EPDateTime" style="width: 550px;">
        <option name="choose">--Choose date, time and house--</option> 
        //Default option that tells users to choose a show
        <option name="20Aug201911:30amh1">20 Aug 2019, 11:30 am, House 1</option> 
        //Details of first show
        <option name="22Aug20194:30pmh2">22 Aug 2019, 4:30 pm, House 2</option> 
        //Details of second show
    </select>
    <input type="submit" value="Choose Seats">
</form>

<br>

<script language="javascript">
    var details="";
    function recordEPDateTime (){
        details = document.getElementById(EPDateTime);
        if(details="20Aug201911:30amh1"){
            window.open("EP20AugHouse1.html");
        }
        //Opens a web page to the house layout of first show
        else if(details="22Aug20194:30pmh2"){
            window.open("EP22AugHouse2.html");
        }
        //Opens a web page to the house layout of second show
        else{
            window.alert("Select a show first.");
        }
        //Displays a window alert that they must choose a show first.
    ;}
</script>

当我点击提交按钮时，我希望第一个选项显示警告消息，第二个选项打开一个窗口到 EP20AugHouse1.html，第三个选项打开一个窗口并转到 EP22AugHouse2.html

但似乎无论我选择哪个选项，当我按下提交按钮时，它总是会打开一个到 EP20AugHouse1.html 的窗口，这是第二个选项的预期结果(2019 年 8 月 20 日，上午 11:30， House 1)，但不是其他两个。 任何人都可以帮助我并告诉我我的代码有什么问题吗？

Answer 1

您没有比较详细信息及其值，而是分配了新值。在这种情况下，if 语句总是返回 true。为了进行比较，请使用 == 或 ===:if(details === "20Aug201911:30amh1") {...}.

此外，id 应该用引号引起来:document.getElementById('EPDateTime') 或者您需要创建 EPDateTime 变量，id 为一个字符串。

但我以不同的方式重写了代码:

<form>
  <select  id="EPDateTime" style="width: 550px;">
    <option name="choose">--Choose date, time and house--</option> 
    //Default option that tells users to choose a show
    <option name="20Aug201911:30amh1">20 Aug 2019, 11:30 am, House 1</option> 
    //Details of first show
    <option name="22Aug20194:30pmh2">22 Aug 2019, 4:30 pm, House 2</option> 
    //Details of second show
  </select>
  <input type="submit" value="Choose Seats">
</form> 

<script type="text/javascript">
  document.querySelector('input').addEventListener('click', event => {
  const select = document.querySelector('select');

  [...select].map(el => {
    if (el.selected) {
      const name = el.getAttribute('name');

      if (name === '20Aug201911:30amh1') {
        window.open('EP20AugHouse1.html');
      } else if (name === '22Aug20194:30pmh2') {
        window.open('EP22AugHouse2.html');
      } else if (name === 'choose') {
        window.alert('Select a show first.');
      }
    }
  });
});
</script>