Question

我正在为课程项目编写HTML页面。它需要根据用户的选择显示不同的信息。我在顶部有5个带有onclick的按钮，它们激活了应该更改其下方<p>元素内部的文本的功能。

我尝试用document.GetElementById('main').innerHTML = link;切换alert('link')，这给了我一个空的警报框。我已经反复检查了语法，并且case语句中没有错误。我知道这不是按钮元素或函数本身的错误，因为当我尝试前面提到的alert语句时，确实给了我一个空的警告框。因此，我排除了我能想到的所有错误。

下面是代码（为简洁起见，删除了大多数按钮元素和case语句）

        <script>
            var link = '';

            function TextSwitch(n) {
                switch (n) {
                    case '1':{
                        link = 'Option 1 has been selected'
                        break;
                    }
                }
                document.GetElementById('main').innerHTML = link;
            }
        </script>
    </head>
    <body style='background:#ffffee'>
        <div align='center'>
            <button type=button style='width:10%' onclick='TextSwitch(1)'>Option 1</button>
        </div>
        <p id='main'>text
        </p>

Answer 1

正在发生的事情是您将1而不是'1'作为参数传递。您的开关正在处理字符串，并且您的参数是整数。您应该更改其中之一才能使其正常工作。

Answer 2

只需在您的switch语句中添加.toString（并如上所述删除不必要的{}）即可。

function TextSwitch(n) {
    switch (n.toString()) {
        case '1':
            link = 'Option 1 has been selected'
            break;
    }
    document.GetElementById('main').innerHTML = link;
}

Answer 3

您遇到了一些问题：

没有GetElementById，是getElementById
您正在尝试在switch语句中将1（数字）与'1'（字符串）进行比较

您可以在switch上使用2种情况解决相同的结果，或者定义适当的解决方案和比较。

<script>
  var link = '';

  function TextSwitch(n) {
    switch (n) {
      case 1:
      case '1':
        {
          link = 'Option 1 has been selected'
          break;
        }
    }
    document.getElementById('main').innerHTML = link;
  }
</script>
</head>

<body style='background:#ffffee'>
  <div align='center'>
    <button type=button style='width:10%' onclick='TextSwitch(1)'>Option 1</button>
  </div>
  <p id='main'>text
  </p>

函数中的switch语句未分配变量

3 个答案: