Javascript 无法更改div标记的html内容_Javascript

Javascript 无法更改div标记的html内容

javascript

Javascript 无法更改div标记的html内容,javascript,Javascript,我一定不明白如何更改标签的内容这是我的html文件： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="simple.js"></script> <title>simple</title> </head> <body> <di

我一定不明白如何更改标签的内容

这是我的html文件：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <script src="simple.js"></script>
        <title>simple</title>
</head>
<body>
        <div id="results" name="results"><!-- Results are displayed here -->
                <form method="post" name="start">
                        <p>Enter url: <input type="text" name="myurl" size="100" /></p>
                        <button onclick="myFunction()">Click me</button>
                </form>
        </div>
</body>
</html>

当我点击该按钮时，会弹出警报，但html不会更改为Hello World。它只是保持不变：

我做错了什么

更新：谢谢大家！以下是我现在的工作内容：

HTML:

按钮的默认行为是提交表单。在这种情况下，如果操作为空，它将尝试提交到当前URL。你需要防止这种情况发生。同样，将Javascript像那样放在HTML中也是一种糟糕的形式-请改用addEventListener：

document.querySelector("#results button").addEventListener("click", function(e) {
    e.preventDefault();
    alert('hey');
    document.getElementById("results").innerHTML = "Hello World";
});

注意：使用此方法或使用DOMContentLoaded事件侦听器时，需要将脚本包含在而不是中

document.querySelector("#results button").addEventListener("click", function(e) {
    e.preventDefault();
    alert('hey');
    document.getElementById("results").innerHTML = "Hello World";
});

注意：使用此方法或使用DOMContentLoaded事件侦听器时，需要将脚本包含在而不是中

原因是表单标签。当您单击按钮时，表单将执行操作，但您没有经过认证的操作，因此chrome将执行defautl操作，即重新加载html

易于理解的输入url:

点击我

原因是表单标签。当您单击按钮时，表单将执行操作，但您没有经过认证的操作，因此chrome将执行defautl操作，即重新加载html

易于理解的输入url:

点击我

谢谢这很有效。但我想我应该找到另一种方法，因为这是一种糟糕的形式，对吗？@RedCricket使用onclick=是一种糟糕的形式。使用本答案中描述的addEventListener，这样您就可以随时更改Javascript，而无需更新HTML。谢谢。如果我添加了第二个按钮，将html更改为“再见残酷世界”，会怎么样？是否有办法检测addEventListener中单击的按钮？正确。尽管拥有干净的HTML是值得的@当然，e.target会给你点击的元素。或者你可以给每个按钮一个唯一的ID，并有两个addEventListener。我想我希望有两个具有唯一ID的按钮。这将如何改变我的addEventListener？我想我不明白你们的答案中的结果按钮是什么意思。谢谢你的帮助：谢谢！这很有效。但我想我应该找到另一种方法，因为这是一种糟糕的形式，对吗？@RedCricket使用onclick=是一种糟糕的形式。使用本答案中描述的addEventListener，这样您就可以随时更改Javascript，而无需更新HTML。谢谢。如果我添加了第二个按钮，将html更改为“再见残酷世界”，会怎么样？是否有办法检测addEventListener中单击的按钮？正确。尽管拥有干净的HTML是值得的@当然，e.target会给你点击的元素。或者你可以给每个按钮一个唯一的ID，并有两个addEventListener。我想我希望有两个具有唯一ID的按钮。这将如何改变我的addEventListener？我想我不明白你们的答案中的结果按钮是什么意思。感谢您的帮助：

function say_something(s) {
        document.getElementById("results").innerHTML = s;
}

document.getElementById("clickme").addEventListener("click", function(){
        var url = document.getElementById('myurl').value;
        if (url==null || url=="") { alert("Please supply a url"); return false; }
        say_something( "Hello World [" + url + "]");
});
document.getElementById("noclickme").addEventListener("click", function(){
        var url = document.getElementById('myurl').value;
        if (url==null || url=="") { alert("Please supply a url"); return false; }
        say_something( "Goodbye [" + url + "]");
});

document.querySelector("#results button").addEventListener("click", function(e) {
    e.preventDefault();
    alert('hey');
    document.getElementById("results").innerHTML = "Hello World";
});