無法更改div標簽的html內容

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不會更改為“ Hello World”。 它只是保持不變:(

我在這里做錯了。

更新：謝謝大家！ 這是我現在正在工作的內容：

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

請注意，使用此方法或使用DOMContentLoaded事件偵聽器時，需要在</body>而不是<head>之前包含腳本。

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 個解決方案

解決方案1
2 已采納 2015-01-28 08:36:02

解決方案2
2 2015-01-28 08:57:26

無法更改div標簽的html內容

問題描述

2 個解決方案

解決方案1 2 已采納 2015-01-28 08:36:02

解決方案2 2 2015-01-28 08:57:26

解決方案1
2 已采納 2015-01-28 08:36:02

解決方案2
2 2015-01-28 08:57:26