CODEWITHSUNDEEP
javascript
Red Cricket
Red Cricket

Reputation: 10460

Cannot change html content of div tag

I must not understand how to change the content of my <div> tag.

Here is my html file:

<!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>

Here is my .js file:

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

When I click the button the alert pops up but the html does not change to "Hello World". It just stays the same :(

What am I doing wrong here.

Update: Thanks everyone! Here is what I have working now:

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>

My .js file:

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

Upvotes: 1

Views: 84

Answers (2)

Caibao Kuang
Caibao Kuang

Reputation: 47

The reason is the form label. when you click the button, the form will take an action,but you did not have a certified action, so the chrome will take the defautl action,ie reload the 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>

Upvotes: 2

CodingIntrigue
CodingIntrigue

Reputation: 78525

A button's default behaviour is to submit the form. In this case, the action being blank, it will try to submit to the current URL. You need to prevent that from happening. Also it's bad form to put Javascript inside your HTML like that - use addEventListener instead:

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

Note you'll need to include your script before the </body> rather than in <head> when using this method, or use the DOMContentLoaded event listener.

Example jsFiddle

Upvotes: 2

Related Questions