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, Jul 16 '13 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, Jul 16 '13 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, Jul 16 '13 at 17:04

score 3 · Answer 1 · edited May 23 '17 at 10:25

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

Thank you for introducing some sanity to the anathema that are inline JS events :-) — David Barker, Jul 16 '13 at 16:45
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? — user1535147, Jul 16 '13 at 16:52
@user1535147: "w3schools make it looks so easy" [w3schools is not good](http://www.w3fools.com/). — Paul D. Waite, Jul 16 '13 at 17:05
@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) — Ian, Jul 16 '13 at 17:19

score 0 · Answer 2 · answered Jul 16 '13 at 16:57

0

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

answered Jul 16 '13 at 16:57

Passing a variable into a DOM function in Javascript

2 Answers2