Javascript not working with HTML external link

Question

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.

Have you checked console for errors? Do you really use jQuery, or this tag is irrelevant? — Regent
– Regent, Commented Oct 20, 2014 at 12:57
It should be document.getElementById(id); not getElementById(id); — Satpal
– Satpal, Commented Oct 20, 2014 at 12:58
Please also change <button onclick=log("testing")> to <button onclick="log('testing')"> to provide valid HTML delimiting :) — iCollect.it Ltd
– iCollect.it Ltd, Commented Oct 20, 2014 at 12:59
Define "not working." How does it fail? When you debug this in the browser, where does it fail? Are there any errors on the JavaScript console? — David
– David, Commented Oct 20, 2014 at 13:00
@TrueBlueAussie even though it works without it, it is good idea indeed. Nevertheless, I will still insist that inline JS is outdated. — Regent
– Regent, Commented Oct 20, 2014 at 13:00

Innodel · Accepted Answer · 2014-10-20 13:01:21Z

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.

answered Oct 20, 2014 at 13:01

Innodel

1,42612 silver badges16 bronze badges

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

1 Comment

Ice Over a year ago

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

iCollect.it Ltd · Accepted Answer · 2014-10-20 13:15:19Z

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(){});

SmartDev · Accepted Answer · 2014-10-20 13:05:00Z

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.

answered Oct 20, 2014 at 13:05

SmartDev

2,8821 gold badge20 silver badges23 bronze badges

3 Comments

Regent Over a year ago

return false is quite useless here, but the whole idea is correct.

SmartDev Over a year ago

If the button is inside a form, then it will post data to the server. This is why I added the return false; bit.

Regent Over a year ago

I understood why you added it, but I don't see any <form>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"

Dharmu Immannavar · Accepted Answer · 2014-10-20 13:01:14Z

-2

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

answered Oct 20, 2014 at 13:01

Dharmu Immannavar

12 bronze badges

5 Comments

iCollect.it Ltd Over a year ago

That is an invalid HTML attribute. You can't nest double-quote inside double-quotes in an HTML attribute.

iCollect.it Ltd Over a year ago

@Satpal... it "should" be onclick="log('testing')" as HTML attributes are preferred to have double-quotes.

Regent Over a year ago

@DharmuImmannavar what about document.getElementById(id); instead of getElementById(id);?

Dharmu Immannavar Over a year ago

actually u have to do like this document.getElementById(id).

iCollect.it Ltd Over a year ago

He means put that in your answer... not just a comment.

Collectives™ on Stack Overflow

Javascript not working with HTML external link

4 Answers 4

1 Comment

Comments

3 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related