JavaScript-斜线被空间所取代

Question

我正在尝试通过JavaScript在我的HTML代码中创建LI元素。该LI将具有一个单击功能。问题在于，试图将文件路径作为loaddoc2（）函数中的参数传递，并出现一些问题。我包括代码。

    function myFunction(){ 
          var x = "NEW";
          var file = "'/static/BRANDS/PERLA/NEW COL/XML Files/NEW COL.xml'";
          lis = "<li><a onclick='loadXMLDoc2(" + file + ")'>" + x + "</a></li>";
          document.getElementById("demo").innerHTML = lis;
        }

这给了我<a onclick="loadXMLDoc2(" static brands perla new col xml files new col.xml')'>NEW</a>。斜线被空间所取代，字母为低情况。我需要的结果是<a onclick="loadXMLDoc2('/static/BRANDS/PERLA/NEW COL/XML Files/NEW COL.xml')">NEW</a>我尝试了许多事情，例如.replace（" "，"//"），但它不起作用。

Answer 1

发生这种情况，因为您在开始时就开始使用'并具有''，因此它关闭了onclick属性。所以看起来像

<li><a onclick='loadXMLDoc2('/static/BRANDS/PERLA/NEW COL/XML Files/NEW COL.xml')'>NEW</a></li>

我建议您使用JavaScript来绑定事件，这会更容易。

function myFunction(){ 
      var x = "NEW";
      var file = "/static/BRANDS/PERLA/NEW COL/XML Files/NEW COL.xml";
      var li = document.createElement('li');
      var a = document.createElement('a');
      a.innerHTML = x;
      a.onclick = function(){
          loadXMLDoc2(file);
      }
      li.appendChild(a);
      document.getElementById("demo").appendChild(li);
}

Answer 2

<div id="container"></div>
<script>
 var container = document.getElementById('container');
 var li = document.createElement('li');
 li.innerText = "Im a list item";
 li.onclick = function(){
  console.log('I was clicked');
 }
 
 container.appendChild(li);
</script>

Answer 3

您似乎有冲突的引号。

lis === "<li><a onclick='loadXMLDoc2('/static/BRANDS/PERLA/NEW-COL/XML-Files/NEW COL.xml')'>NEW</a></li>"

请注意，k='loadXMLDoc2('/将打开，然后关闭引号。通过将单人更改为双引号修复：

var x = "NEW";
var file = "'/static/BRANDS/PERLA/NEW-COL/XML-Files/NEW COL.xml'";
lis = `<li><a onclick="loadXMLDoc2(${file})">${x}</a></li>`;
document.body.innerHTML = lis;