Javascript OnClick Function Not Working

Question

Rewriting Full Javascript.

Javascript

<div id="PopUp1" style="display: none; color: #FFFFFF;"></div>
<div id="Mask"></div>
<script type="text/javascript">
var Design = '<p>Design!!!!!</p><input type="submit" value="Close" onClick="Close(Design,1)" />';

function PopUp(htmlstring, id) {
    $('#PopUp' + id).fadeIn('slow');
    $('#Mask').fadeIn('slow');
}

function Close(htmlstring, id) {
    $('#PopUp' + id).fadeOut('slow');
    $('#Mask').fadeOut('slow');
}

$('#Mask').click(function () {
    $('#Mask').fadeOut('slow');
    $('#PopUp' + id).fadeOut('slow');
});
</script>

HTML

 <td width="100" align="center" onClick="PopUp(Design,1)">Designs</td>

Now The Mask Shows up with the VAR Design. But The Var isn't showing?

You are loading jQuery twice. Either use jquery-latest.js or jquery-1.8.3.js but not both. Also, you edited the `$`s to the code later--does it still not work with them there? Also also, the HTML is invalid: you can't have divs inside a table if they're not inside a td or th. — JJJ, May 11 '13 at 16:28
The TD is inside a table, it's just I copied the line of Coding with the onClick! — Psycho Wars, May 11 '13 at 16:34
How about creating a jsfiddle that demonstrates your problem? And to be honest your updated code/html does not improve our understanding of the problem that you have. You have CSS, HTML and Javascript all mixed in together. — Xotic750, May 11 '13 at 17:05

score 0 · Answer 1 · answered May 11 '13 at 16:19

0

You're using jQuery, except for the $. Also make sure you are including jQuery in your <head>.

function PopUp(htmlstring,id) {
  $('#PopUp'+id).fadeIn('slow');   
  $('#Mask').fadeIn('slow');
}
function Close(htmlstring,id) {
  $('#PopUp'+id).fadeOut('slow');  
  $('#Mask').fadeOut('slow');
}

Also, although this shouldn't matter, use onClick instead of onclick:

<input type="submit" value="Close" onClick="Close(Design,1)" />

answered May 11 '13 at 16:19

Mooseman

18,763
14
70
93

Ah! I was wondering what is the syntax about! BTW: really onClick?? I havent seen it yet. – Jan Turoň May 11 '13 at 16:19
2

No, do NOT use inline onClick when you have jQuery already. Instead assign on("click") in the head on load – mplungjan May 11 '13 at 16:29
Should I just do a var? For Instance: var Design = '
Design!!!

'; – Psycho Wars May 11 '13 at 16:32
http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice and http://en.wikipedia.org/wiki/Unobtrusive_JavaScript – Xotic750 May 11 '13 at 16:33
When I Added: var Design = '
Design!!!!!
'; .. The Mask Div showed up. – Psycho Wars May 11 '13 at 16:37
And along the same line with CSS, http://stackoverflow.com/questions/3142710/inline-styles-vs-classes – Xotic750 May 11 '13 at 16:37

mplungjan · Answer 2 · 2013-05-11T18:45:10.473

Please consistently use jQuery if you have it and only load it once!!!

Is there any specific reason to use a submit button? If not make it type="button"

<!DOCTYPE html>
<html>
<head>
<title>Test popup</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
function PopUp(htmlstring,id) {
  $('#PopUp'+id).fadeIn('slow');    
  $('#Mask').fadeIn('slow');
}
function Close(htmlstring,id) {
  $('#PopUp'+id).fadeOut('slow');   
  $('#Mask').fadeOut('slow');
}
$(function() {
  $("#closeButton").on("click",function() {
    Close('Design',1); // not sure what htmlstring is 
  });
  $("#openButton").on("click",function() {
    Popup('Design',1); // not sure what htmlstring is 
  });
});
</script>
</head>
<body>
.
.
.
</body>
</html>

score 0 · Answer 3 · answered May 11 '13 at 17:22

I'm not sure if i understand your problem correctly but if I do, then you want the text, that is inside your variable Design to be shown in your popup.

You setted up your function PopUp with an argument htmlstring, but you never use it. So maybe this would help:

function PopUp(htmlstring, id) {
    $('#PopUp' + id).html(htmlstring);
    $('#PopUp' + id).fadeIn('slow');
    $('#Mask').fadeIn('slow');
}

Javascript OnClick Function Not Working

3 Answers3