Javascript OnClick 功能不起作用答案

【问题标题】：Javascript OnClick Function Not WorkingJavascript OnClick 功能不起作用
【发布时间】：2013-05-12 02:45:10
【问题描述】：

重写完整的 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>

现在面具与 VAR 设计一起出现。但是 Var 没有显示？

【问题讨论】：

您在 console.log 中看到了哪些错误（如果有）？
您正在加载 jQuery 两次。使用 jquery-latest.js 或 jquery-1.8.3.js 但不能同时使用。此外，您稍后将$s 编辑到代码中——它仍然无法与它们一起使用吗？此外，HTML 无效：如果 div 不在 td 或 th 内，则不能在表内包含 div。
TD在表格里面，只是我用onClick复制了Coding那一行！
是的，但是 div 是 td 内的吗？
如何创建一个 jsfiddle 来演示您的问题？老实说，您更新的代码/html 并没有提高我们对您遇到的问题的理解。您将 CSS、HTML 和 Javascript 混合在一起。

标签： javascript jquery html onclick

【解决方案1】：

您正在使用 jQuery，$ 除外。还要确保在 <head> 中包含 jQuery。

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

此外，尽管这无关紧要，但请使用 onClick 而不是 onclick：

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

【讨论】：

啊！我想知道语法是什么！顺便说一句：真的 onClick 吗？我还没看到呢。
不，当你已经有 jQuery 时不要使用内联 onClick。而是在加载时在头部分配 on("click")
我应该只做一个var吗？例如：var Design = '
Design!!!

';跨度>
stackoverflow.com/questions/5871640/… 和 en.wikipedia.org/wiki/Unobtrusive_JavaScript
当我添加时：var Design = '
Design!!!!!
'; .. Mask Div 出现了。

【解决方案2】：

我不确定我是否正确理解了您的问题，但如果我理解了，那么您希望将变量 Design 中的文本显示在弹出窗口中。

您使用参数 htmlstring 设置了函数 PopUp，但您从未使用过它。所以也许这会有所帮助：

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

【讨论】：

【解决方案3】：

如果你有 jQuery，请始终使用它，并且只加载一次！！！

使用提交按钮有什么特别的原因吗？如果没有，请键入=“按钮”

<!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>

【讨论】：