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

Question

我正在创建动态 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>

Answer 1

如果你为这个做一个简单的片段：

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

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

<div onclick=info(responseServer.name)>Click me!</div>

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

编辑

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

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

代码有效。您需要将 onclick 中的函数用引号引起来。请检查片段

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>

我已将代码段更新为再举一个例子

Answer 3

我得到了如下解决方法：

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>");

<div id="one"></div>

这不是实际的构建和运行时环境。我已经在带有 angular 的 ionic 3 中使用了这个变通方法。

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

How to pass string parameter in innerhtml

javascript

html

angular

ionic-framework

ionic3