-2

I'm using Notepad++, and I know for sure that it works when linking different files to the main HTML file.Here is the HTML code I'm using:

    <link rel="stylesheet" type="style/css" href="adventure.css"></link>
    <script src="adventure.js"></script>
</head>
<body>
    <button onclick=log("testing")>Click Me</button>
    <div id="box">
        <div id="out"></div>
    </div>
</body>

And here is the JavaScript code:

function Gid(id) {
return getElementById(id);
}
function log(s) {
    Gid("out").innerHTML = s + "<br>" +
    Gid("out").innerHTML;
}

And the CSS for the divs

#box {
    width:500px;
    height:300px;
    border:5px solid black;
    overflow:auto;
}
#out {
    width:500px;
}

Please help me figure out why it's not working.

Ice
  • 1
  • 2

4 Answers4

1

You have to call function on onclick event as :

onclick="log('testing')"

and you have to also use

return document.getElementById(id);

in Gid function

that's it.

Innodel
  • 1,416
  • 12
  • 16
  • This was enough to get it to work, thanks! (I played around with it a bit, and it worked even without " " around log("testing"), the only problem was document.getElementById(id); – Ice Oct 20 '14 at 14:09
1

The problems have been covered in comment and other answers.

As you tagged this question with jQuery here is the simpler jQuery equivalent:

HTML:

<body>
    <button id="testme">Click Me</button>
    <div id="box">
        <div id="out"></div>
    </div>
</body>

Code:

// Listen for click on the id="testme" button
$('#testme').click(function(){
     // $('#out') is a jquery wrapped version of the id="out" div
     var $out = $('#out');
     // jQuery html reads/or writes innerHTML depending on parameters
     $out.html("testing" + "<br/>" + $out.html()); 
});

If the script precedes the elements it accesses in the page, you will need to wrap it in a DOM ready handler:

$(function(){
    // Listen for click on the id="testme" button
    $('#testme').click(function(){
         // $('#out') is a jquery wrapped version of the id="out" div
         var $out = $('#out');
         // jQuery html reads/or writes innerHTML depending on parameters
         $out.html("testing" + "<br/>" + $out.html()); 
    });
});

Note: $(function(){}); is just a handy shortcut for $(document).ready(function(){});

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202
0

There are two updates that you need to do. First, replace this line:

<button onclick=log("testing");>Click Me</button>

with this line:

<button onclick="log('testing'); return false;">Click Me</button>

This should prevent your page from posting back when you click the button. Then replace this line:

return getElementById(id);

with this line:

return document.getElementById(id);

because you don't have any valid context there.

SmartDev
  • 2,802
  • 1
  • 17
  • 22
  • `return false` is quite useless here, but the whole idea is correct. – Regent Oct 20 '14 at 13:07
  • If the button is inside a form, then it will post data to the server. This is why I added the `return false;` bit. – SmartDev Oct 20 '14 at 13:11
  • I understood why you added it, but I don't see any `
    `s in OP code. It's good to mention `return false` for preventing default behaviour in forms, I totally agree, but as additional note, not as part of _necessary_ "replace this with that"
     – Regent Oct 20 '14 at 13:14
-2

try to call the function onclick="log('testing')" like this it might work

Dharmu Immannavar
  • 1
  • 2