Question

我现在有大麻烦了。我正在尝试使用纯JavaScript编写一个小脚本。但是我有一个问题。如果单击按钮，则什么也不会发生（但警报有效）。好像页面刚刚刷新一样，因为控制台日志也不起作用。

<form>
    <select class="select" id="test">
        <optgroup>
            <option selected disabled hidden>Default</option>
            <option value="1">Value 1</option>
        </optgroup>
    </select>
    <button class="btn" onclick="myFunction();">text</button>
</form>



function myFunction() {
    var e = document.getElementById("test"); 
    var strUser = e.options[e.selectedIndex].value;
    if (strUser > 0) {
        window.location.href = 'www.google.com';
    } else {
        alert("Error")
    }
}

Answer 1

getElementbyId仅采用字符串，不包含“＃”。

Answer 2

@OndřejMusil，当您要求不要忘记看跌期权详细信息和更完整的代码时，请务必小心。

我想我有你的答案！但是让我知道你是否在尝试... 您有一个按钮和一个选择吗？当您在按钮上单击时，将被称为该函数，对吧？

HTML

<button onclick="myFunction()"> Redirect </button>
<select id="test">
  <option value="1"  selected="selected">User 1</option>
  <option value="2">User 2</option>
</select>

JS

function myFunction() {    
    var e = document.getElementById("test");
        var strUser = e.options[e.selectedIndex].value;

    if (strUser > 0) {
        window.location.href = 'http://www.google.com';
    } else {
        alert("Error")
    }
}

请尝试一下！

Answer 3

您的按钮在表单内。单击它将提交表单。

因此，您的onclick函数运行，开始导航到www.google.com（缺少方案的URL），然后表单提交并开始导航到表单的action（未指定，因此默认到当前页面的URL）。

第二个导航将覆盖第一个导航，因此您将重新加载当前页面，而不是www.google.com。

您需要取消表单提交或提交按钮的默认行为。

使用您当前使用的1990年代方法：

<button class="btn" onclick="myFunction(); return false">

或使用现代代码：

document.querySelector("form")
    .addEventListener("submit", myFunction);

和

function myFunction (event) {
    event.preventDefault();
    // etc

具有重定向功能的JavaScript onclick函数不起作用

3 个答案: