Question

我无法理解如何更改<div>标记的内容。

这是我的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>

这是我的.js文件：

function myFunction() {
    alert('hey');
    document.getElementById("results").innerHTML = "Hello World";
}

当我点击按钮时，警告会弹出，但html不会更改为＆＃34; Hello World＆＃34;。它保持不变:(

我在这里做错了什么。

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

HTML：

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

我的.js文件：

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 + "]");
});

Answer 1

按钮的默认行为是提交表单。在这种情况下，操作为空，它将尝试提交到当前URL。你需要防止这种情况发生。将Javascript放入HTML中也是一种不好的形式 - 改为使用addEventListener：

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

请注意，在使用此方法时，您需要在</body>之前包含脚本，而不是在<head>中，或使用DOMContentLoaded事件侦听器。

Example jsFiddle

Answer 2

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

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

无法更改div标签的html内容

2 个答案: