如何将动态生成的变量传递给 JavaScript 函数的 innerHTML 内的函数

How can I pass my dynamically-generated variable to the function inside the innerHTML of a javascript function?

本文关键字：函数 JavaScript innerHTML 变量 动态      更新时间：2023-09-26

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

<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，应该隐藏，直到在javascript函数中的onclick#2（DisplayUserStats）

）： 
<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 Boxdiv 变得可见，但当然统计信息是未定义的，因为没有定义用户名。只有当看似任何内容被放置在 DisplayUserStats（） 中时，统计框div 才无法打开（例如，DisplayUserStats（dummystring） 不会打开统计框div。 请注意，我已经尝试了其他几个连接（认为我做错了），例如，+用户名+'+用户名+'用户名等。 有人可以阐明如何将变量用户名传递给函数 DisplayUserStats（）？

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

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

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

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

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

相关文章：