如何在innerhtml中传递字符串参数答案

【问题标题】：How to pass string parameter in innerhtml如何在innerhtml中传递字符串参数
【发布时间】：2020-09-30 20:27:17
【问题描述】：

我正在创建动态 html 基础服务器响应。

例子：

var responseServer = {
name: "al the' too"
}

var htmlView = `<div onclick="info(responseServer.name)"> </div>`; 
//Error: al identifier is not defined. 

var htmlView = `<div onclick="info('responseServer.name')"> </div>`; 
//Error: Uncaught SyntaxError: missing ) after argument list

构建 html 后，我得到以下代码：

function info(name){
	alert(name);
}

<div>
<button onclick="info('al al'the ra)">
  Test
</button>
</div>

【问题讨论】：

第一个语法似乎没问题。错误al identifier is not defined 表示它在 info 函数中存在一些错误。
信息函数没有被调用
如何将 htmlView 添加到页面中？如果它不使用 dom 方法，那么 onclick 事件处理程序可能不会被附加，它就像一个文本躺在那里。
我想你请在这里添加更多代码以便我们可以看到上下文，你能创建一些 stackblitz 等来显示它是什么吗？
是的，添加更多代码

标签： javascript html angular ionic-framework ionic3

【解决方案1】：

我的解决方法如下：

function info(name){
	alert(atob(name));
}

var sName = "al al'the ra";

var myHtml = document.getElementById("one");
myHtml.insertAdjacentHTML('beforeend', "<button onclick=info(btoa(sName))> Test </button>");

&lt;div id="one"&gt;&lt;/div&gt;

这不是实际的构建和运行时环境。我已经在 ionic 3 中使用了这个工作。

【讨论】：

【解决方案2】：

代码正在运行。您需要用引号将 onclick 内的函数括起来。请检查sn-p

function streetInfoSinage(name){
          alert(name)
          }
          var name = "Al Ma'mourah St";
          
function createDom(){
  let responseServer = {
    name: "al the' too"
  };
  
  
  let div = document.createElement("div");
  div.textContent = "Hello World " + responseServer.name;
  div.addEventListener("click", function(){info(responseServer.name)});
  document.getElementById("my-dom").appendChild(div);
}

function info(name){
  alert(name);
}

<p style="margin-top:2px;margin-bottom:2px;" onclick='streetInfoSinage("Razeen St")'>
            Razeen St &nbsp; <i style="font-size: 14px;" class="fas fa-info-circle"></i>
          </p>
          
<div id="my-dom">
</div>

<button onclick="createDom()">call info</div>

我已经更新了 sn-p 来给出另一个例子

【讨论】：

这不是他正在尝试阅读其他答案的 cmets...
您可以根据需要更改我已经更新了 sn-p 以添加另一个示例

【解决方案3】：

如果你做一个简单的 sn-p fot 这个：

var responseServer = {
  name: "al the' too"
}

function info(str){
  console.log(str)
}

&lt;div onclick=info(responseServer.name)&gt;Click me!&lt;/div&gt;

您可以看到它运行良好。所以正如@muasif80 指出的那样，它与info() 函数有关！

编辑

如果我动态添加带有onclick() 事件的 div，它仍然有效：

$('body').append('<div onclick=info(responseServer.name)>Click me!</div>');

var responseServer = {
  name: "al the' too"
}

function info(str){
  console.log(str)
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

info 函数未执行，我正在 javascript 中生成 html
你确定info()函数被识别了吗？ @KhurshidAnsari
请让我试试
我正在生成hmtl动态
@KhurshidAnsari 我现在正在添加它是动态的，但我仍然没有任何问题......你可以尝试在你的问题中重新解决这个问题吗？