Passing a variable into a DOM function in Javascript

Question

I took this example from w3schools and modify it to this. The code below is not working.

What I intend to do is hide the div with id "demo1". It is not working. What is the problem?

<!DOCTYPE html>
<html>

<head>
    <script>
        function myFunction(div_id)
        {
            //here the div_id variable seems to unparsable by the DOM event
            document.getElementById(div_id).innerHTML = hello;
        }
    </script>
</head>


<body>

    <p>Click the button to trigger a function.</p>

    <button onclick="myFunction('demo1')">Click me</button>

    <div id="demo1"></div>
    <div id="demo2"></div>

</body>
</html>

er, did you change your code significantly in the edit? That's... not super-helpful. Makes the existing answer look a bit odd. — Paul D. Waite
– Paul D. Waite, Commented Jul 16, 2013 at 16:48
yes. Believe it or not, they do completely different things. I think that's why they were given completely different names. — Paul D. Waite
– Paul D. Waite, Commented Jul 16, 2013 at 17:02
Given that your question was "why isn't this code working?", changing the code once it's been answered makes it a different question. Better to add the new code at the bottom of the question, or possibly answer a new question. — Paul D. Waite
– Paul D. Waite, Commented Jul 16, 2013 at 17:04

Community · Accepted Answer · 2017-05-23 10:25:33Z

3

The variable hello is not defined. You were probably looking to set the innerHTML as a String:

function myFunction(div_id) {
    document.getElementById(div_id).innerHTML = "hello";
    // -----------------------------------------^-----^
}

DEMO: http://jsfiddle.net/uzuKp/1/

Even though you took an example from W3Schools and modified it, I'd suggest binding events separate from the HTML and storing associated data in data-* attributes. In your example, it can be as something like this:

<p>Click the button to trigger a function.</p>

<button data-div-id="demo1">Click me</button>
<button data-div-id="demo2">Click me</button>
<button data-div-id="demo1">Click me</button>

<div id="demo1">demo1</div>
<div id="demo2">demo2</div>

And the JS:

function clickHandler() {
    var targetDivId, targetDiv;
    targetDivId = this.getAttribute("data-div-id");
    targetDiv = document.getElementById(targetDivId);
    targetDiv.innerHTML = "Hello" + new Date().getTime();
}

function loadHandler() {
    var buttons, i, j, cur;
    buttons = document.getElementsByTagName("button");
    for (i = 0, j = buttons.length; i < j; i++) {
        cur = buttons[i];
        cur.onclick = clickHandler;
    }
}

window.onload = loadHandler;

DEMO: http://jsfiddle.net/3K4RD/

Although I would also suggest looking at the following article to see different ways to bind events: addEventListener vs onclick

One final suggestion I have is to not set the innerHTML property. You may have a simple example here, but it's usually a better idea to use DOM methods like appendChild (to add a node) and document.createTextNode (to create text that can be appended). Of course, that would require the contents to be cleared out first, something like:

while (targetDiv.firstChild) {
    targetDiv.removeChild(targetDiv.firstChild);
}
targetDiv.appendChild(document.createTextNode("Hello"));

DEMO: http://jsfiddle.net/52Kwe/

You could also store the specific string that needs to be set as the innerHTML as a data-* attribute (especially if it differs between buttons).

UPDATE:

Per your recent edit, the style property is a special property, which is actually a special object with style properties that you need to set. So for your example, you have to set the .style.display value, like:

document.getElementById(div_id).style.display = "none";

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Jul 16, 2013 at 16:34

Ian

51k13 gold badges104 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

David Barker Over a year ago

Thank you for introducing some sanity to the anathema that are inline JS events :-)

user1535147 Over a year ago

Thanks for your help and sorry for the inconvenience. I have a question though, w3schools make it looks so easy. Why do I have to go through the hassle to bind events? What are the advantages?

Paul D. Waite Over a year ago

@user1535147: "w3schools make it looks so easy" w3schools is not good.

Ian Over a year ago

@user1535147 I could probably write a lot about event binding...mainly, HTML and JavaScript are "supposed to" be separate, semantically and logically. You should be able to know exactly where each part of your webpage is. You can obviously have onclick="someFunction();" (which does the same thing) in an HTML tag, but then you have to find your (possibly spread out) JavaScript and find someFunction. If everything's in one place, it's easy to debug and keep track of. Using addEventListener, you can bind multiple handlers for the same event to a single element (which happens often)

user2587132 · Accepted Answer · 2013-07-16 16:57:38Z

0

document.getElementById(div_id).style.display = 'none';
document.getElementById(div_id).style.visibility= 'hidden';

answered Jul 16, 2013 at 16:57

user2587132

Collectives™ on Stack Overflow

Passing a variable into a DOM function in Javascript

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related