Javascript - スラッシュは空白に置き換えられます

Question

javascriptを使用してHTMLコードにli要素を作成しようとしています。このliにはonclick関数があります。問題は、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属性を閉じるために、 'and file has a'を使用して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;