0

This code should work fine, but i don't know where it is getting stuck!

This code is very simple, and it should work, I think the problem is the 3rd parameter that is passed ("mouseup", function(){}, false)

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>html demo</title> </head> <body> <a id="navlink" href="http://google.com">Click me</a> <div id="Reveal">Not Clicked</div> <script> document.getElementById('navlink').addEventListener("mouseup" , function(e){ e.preventDefault(); document.getElementById('reveal').innerHTML("Clicked"); },false); </script> </body> </html>
Improve this question
4
  • 1
    its should be Uppercase 'R' in document.getElementById('reveal') as your using id name for div as Reveal Commented Sep 17, 2014 at 7:05
  • 1
    Why do you think that e.preventDefault() is the problem? Commented Sep 17, 2014 at 7:05
  • 1
    id="Reveal" so document.getElementById('Reveal').innerHTML = "Clicked" Commented Sep 17, 2014 at 7:06
  • @ChakravarthySM and anup i have made another silly mistake, the code is working but it is not preventing the default function Commented Sep 17, 2014 at 7:10

6 Answers 6

Reset to default
1

You have a problem with the innerHTML and the id of the div Reveal

document.getElementById('navlink').addEventListener("mouseup" , function(e){ e.preventDefault(); document.getElementById('Reveal').innerHTML = "Clicked"; },false);

Regards.

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

3 Comments

that i changed, but the problem was due to mouseup!
Check this fiddle, is it working as you expected? jsfiddle.net/marioaraque/tuwcfpmj
Actually if you click the link, the page loads and it wants to go to the link, but jsfiddle is preventing it. Try changing mouseup to click you will notice that the page doesn't load!
0

Please try adding click event instead of mouseup.

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>html demo</title> </head> <body> <a id="navlink" href="http://google.com">Click me</a> <div id="Reveal">Not Clicked</div> <script> document.getElementById('navlink').addEventListener("click" , function(e){ e.preventDefault(); //document.getElementById('reveal').innerHTML("Clicked"); },false); </script> </body> </html>
Improve this answer

5 Comments

Thanks Paul- i replaced mouseup with click and now it is working :) Can you explain me why mouseup was not working?
Actually in hyperlink when you click its click event and not mouseup event
and what is that false in the end, i thought it works with mouseup!
It's the 3rd parameter of addEventListener juse see stackoverflow.com/questions/6348494/addeventlistener-vs-onclick
Find the detailed explanation of third parameter stackoverflow.com/questions/17564323/…
0

Try this, 

document.getElementById('reveal').innerHTML = "Clicked";

Because innerHTML is property not a function. Also you have a typo in your code, 'Reveal' is the id of DIV.

Improve this answer

1 Comment

ohh man, this was a silly mistake i did there, but it is still not working for vaibhav thanks for replying, but can you identify any other issue?
0

You need the following corrections, please see the snippet below

1) .innerHtml is not a method, its a property so you must use =

2) getElementById are case sensitive so document.getElementById('reveal') must be document.getElementById('Reveal')

document.getElementById('navlink').addEventListener("mouseup" , function(e){ e.preventDefault(); document.getElementById('Reveal').innerHTML = "Clicked"; },false);
<a id="navlink" href="http://google.com">Click me</a> <div id="Reveal">Not Clicked</div>

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

Improve this answer

1 Comment

Thanks Mahan, i changed the things you told me, but the problem was due to mouseup, i changed it to click and it is working fine now, thanks :)
0

innerHTML is a property, not a mutator method. The syntax are as follows:

Return the innerHTML property: HTMLElementObject.innerHTML

Set the innerHTML property: HTMLElementObject.innerHTML=text

In your case, it should be: document.getElementById('reveal').innerHTML = "Clicked";

Also, the last parameter for the addEventListener is optional. It is a Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase.

Improve this answer

2 Comments

ok just don't use w3schools I saw you earlier you use w3schools as references
ok, i am a beginner in javascript, can you refer me some good references?
0

e.preventDefault does not prevent either mouseup or mousedown. Check this answer. You must use click() or addEventListener("click", to use preventDefault.

Example: document.getElementById('navlink').addEventListener("click" , function(e){

And in your code you made a mistake of using innerHTML as a function and reveal has a capital R, so the corrected form is

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>html demo</title> </head> <body> <a id="navlink" href="http://google.com">Click me</a> <div id="Reveal">Not Clicked</div> <script> document.getElementById('navlink').addEventListener("click" , function(e){ e.preventDefault(); document.getElementById('Reveal').innerHTML = "Clicked"; },false); </script> </body> </html>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.