Question

我正在使用HTML / CSS / Javascript测试水域。我对这三种语言分别（适度）牢固掌握，只是试图让他们互相合作，给我带来问题。

我的CSS和Javascript文件在外部链接到我的HTML文件。

我正在尝试使用Javascript来保存变量中的用户输入并在警报窗口中显示文本。

function saveUn() {
  var username = document.getElementById('un').value;
  alert(username);
}

<form>
  Username:
  <input type="text" size="12" id="un" /><br />
  <input type="submit" onclick="saveUn();" />
</form>

非常感谢任何帮助！

更新：事实证明我的问题是我没有正确插入我的外部Javascript文件。我修好了，现在我的代码运行得很好。错别字生活，孩子们。

Answer 1

尝试使用event.preventDefault();

function saveUn(event) {
  var username = document.getElementById('un').value;
  alert(username);
  event.preventDefault();
}

<form>
  Username:
  <input type="text" size="12" id="un" /><br />
  <input type="submit" onclick="saveUn(event);" />
</form>

Answer 2

让你的回调return为false并将其传递给onclick处理程序：

<form>
    Username:
    <input type="text" size="12" id="un" /><br />
    <input type="submit" onclick="return saveUn();" />
</form>

function saveUn() {
    var username = document.getElementById('un').value;
    alert(username);
    return false;
}

Answer 3

以下是可能对您有帮助的代码。

＆＃13;

    
    document.getElementById("clickHere").addEventListener("click", function(event){
    event.preventDefault()
    var username = document.getElementById('un').value;
    alert(username);
});

＆＃13;

<form >
        Username:
        <input type="text" size="12" id="un" /><br />
        <input type="submit" id="clickHere" />
    </form>

＆＃13;

Answer 4

如果您不想提交表单并且只想显示alert，请尝试使用此选项：

<form onSubmit = "return saveUn();">
    Username:
    <input type="text" size="12" id="un" /><br />
    <input type="submit" />
</form>
<script>
function saveUn() {
    var username = document.getElementById('un').value;
    alert(username);
    return false;
}
</script>

Answer 5

如果您不想提交，可以返回saveUn()，return false的布尔值

＆＃13;

function saveUn() {
  var username = document.getElementById('un').value;
  alert(username);
  return false;
}

＆＃13;

<form>
  Username:
  <input type="text" size="12" id="un" /><br />
  <input type="submit" onclick="return saveUn();" />
</form>

＆＃13;

Answer 6

使用ES6应该更好：

<form >
    Username:
    <input type="text" size="12" id="un" /><br />
    <input type="submit" id="clickHere" />
</form>   

 const smBtn = document.querySelector("clickHere");
 smBtn.addEventListener("click", (event) => {
    event.preventDefault()
    let username = document.querySelector('un').value;
    alert(username);
});

将HTML用户输入保存到Javascript变量

6 个答案: