如何将动态生成的变量传递给 javascript 函数的 innerHTML 内的函数？答案

【问题标题】：How can I pass my dynamically-generated variable to the function inside the innerHTML of a javascript function?如何将动态生成的变量传递给 javascript 函数的 innerHTML 内的函数？
【发布时间】：2013-11-14 05:16:02
【问题描述】：

在我的网站上，我在链接上使用 onclick 事件来调用 javascript 函数（链接位于来自外部 php 文件的 WHILE 循环中）。 php WHILE 循环中的 onclick 将用户图片和用户名传递给名为 ShowUser() 的 javascript 函数。该事件正确生成了用户名和照片，并将其放置在 div 的 innerHTML 中，如下所示：

<script language="javascript" type="text/javascript">
function ShowUser(userpic,username) {
var TitleDesc1 = 'Click this photo to learn more about '+username+'';
document.getElementById('UserPicHolder').innerHTML = '<img class="TipTip"    
title="'+TitleDesc1+'" src="'+userpic+'" style="width:60px; height:66px" alt="user  
picture">';
}
</script>

这可以正常工作。但是，当我尝试使用户图片可点击（onclick #2）（通过添加href）以显示用户的站点统计信息时，该功能不会打开统计框（一个应该隐藏的div，直到onclick＃2（DisplayUserStats ) 在 javascript 函数中):

<script language="javascript" type="text/javascript">
function ShowUser(userpic,username) {
var TitleDesc1 = 'Click this photo to learn more about '+username+ '';
document.getElementById('UserPicHolder').innerHTML = '<a href="#null"    
onclick="DisplayUserStats("'+username+'")"><img class="TipTip" title="'+TitleDesc1+'"    
src="'+userpic+'" style="width:60px; height:66px" alt="user picture"></a>';
}
</script>

当函数 DisplayUserStats() 为空（如 DisplayUserStats() ）时，用户的 Stats Box div 就像预期的那样变得可见，但是由于没有定义用户名，所以当然统计信息是未定义的。只有当看似任何内容放置在 DisplayUserStats() 中时，Stats Box div 才会打开（例如 DisplayUserStats(dummystring) 不会打开 Stats Box div。请注意，我尝试了其他几种连接方式（认为我做错了），例如，+username+ '+username+' 用户名等。有人可以说明如何将变量 username 传递给函数 DisplayUserStats()？

【问题讨论】：

很难说你想在这里做什么。
我想将用户名传递给函数 DisplayUserStats()。我可以将用户名传递给在 innerHTML 之外调用的函数，但我似乎无法将用户名传递给 DisplayUserStats()，这是一个在 innerHTML 内部调用的函数。
好的，请检查@bfavaretto 的答案 - 如果更新内容的那一行真的在你的真实源代码中被打破，那么你不能这样做。

标签： javascript innerhtml

【解决方案1】：

如果不使用内联事件处理程序，它看起来真的会更干净。但问题是双引号内有双引号（因此破坏了 HTML）：

<a href="#null" onclick="DisplayUserStats("SomeUsername")">...

你可以用这个丑陋的东西来解决这个问题：

onclick="DisplayUserStats(\''+username+'\')">

另外，定义 JavaScript 字符串时不要换行，否则代码会失败。

【讨论】：

看起来字符串常量（内容字符串）被打破了几行......
感谢 bfavaretto...它工作得很好。一个问题：我在很多地方都读到了与您所说的关于用 Javascript 字符串换行的内容完全相同的内容。但是（我不怀疑你在说什么）我在我的代码中多次打破了这个“规则”，并且代码似乎仍然在每个浏览器中都能正常工作。关于为什么会出现这种情况的任何想法？
@ChemBlob9999 你确定吗？ This simple example 肯定会中断（打开控制台查看错误）。