CODEWITHSUNDEEP
javascripthtmldom
user1535147
user1535147

Reputation: 1475

Passing a variable into a DOM function in Javascript

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>

Upvotes: 0

Views: 2601

Answers (2)

user2587132
user2587132

Reputation: 

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

Upvotes: 0

Ian
Ian

Reputation: 50905

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

Upvotes: 3

Related Questions