通過賦值輸出 HTML 元素的值

Question

我做了按鈕教程和 HTML 選擇器教程，但似乎無法讓它發揮作用。 請不要只給我答案，我要認識到我的錯誤。

這是我的代碼：

目標

目標是獲取每個<li>標簽並為它們分配一個按鈕，將它們的文本輸出到 Javascript 控制台。 好像是說，您單擊了此按鈕，因此您選擇了褲子。

JS

list[x].innerHTML += ('<button onClick="console.log('+list[x].innerHTML+');">Select Item</button>');

 let storedListValue = []; let y = 0, x = 0; function outputTargetValues() { let list = document.querySelectorAll("li"); console.log(list.length); while (x < list.length) { storedListValue.push(list[x].innerHTML); console.log(storedListValue[x] + " This is storedListValue Data"); //console.log(list[x].innerHTML); list[x].innerHTML += ('<button onClick="console.log(' + list[x].innerHTML + ');">Select Item</button>'); //console.log(list[x]); y++; x++; } } function output(itemName) { console.log(itemName); } function callMeOutput() { console.log(y); return storedListValue[x]; }

 <h3>Shirts</h3> <ul id='list'> <li id='i1'>Biker Jacket</li> <li id='i2'>Mens Shirt</li> </ul> <button onClick="outputTargetValues();">Test</button>

Answer 1

如果要在單擊第一個按鈕時打印列表元素的文本，則需要更改此行：

list[x].innerHTML += ('<button onClick="console.log(\'' + list[x].innerHTML + '\');">Select Item</button>');

您的代碼的問題在於，您的結果輸出類似於console.log(Mens Shirt) ，這是一個語法錯誤。 使用我現在提供的代碼，字符串帶有引號，因此沒有錯誤。

 let storedListValue = []; let y = 0, x = 0; function outputTargetValues() { let list = document.querySelectorAll("li"); console.log(list.length); while (x < list.length) { storedListValue.push(list[x].innerHTML); console.log(storedListValue[x] + " This is storedListValue Data"); list[x].innerHTML += ('<button onClick="console.log(\\'' + list[x].innerHTML + '\\');">Select Item</button>'); y++; x++; } } function output(itemName) { console.log(itemName); } function callMeOutput() { console.log(y); return storedListValue[x]; }

 <h3>Shirts</h3> <ul id='list'> <li id='i1'>Biker Jacket</li> <li id='i2'>Mens Shirt</li> </ul> <button onClick="outputTargetValues();">Test</button>

我建議您在收到此類錯誤時檢查 HTML 輸出，並嘗試查看是否存在任何語法錯誤。 這可能會對您未來的項目有所幫助:)

Answer 2

主要問題是這一行button onClick="console.log(' + list[x].innerHTML + ') 。 onclick一個函數名稱，但您正在嘗試在此處運行 javascript 代碼。

其次總是避免編寫內聯javascript。

您還需要將eventlistener附加到buttons ，只有在創建按鈕並將其添加到 dom 后才能執行此操作。

在此代碼片段中， button的事件偵聽button是在 while 循環之后添加的。

還有 t

 let storedListValue = []; let y = 0, x = 0; document.getElementById('otTargetVal').addEventListener('click', outputTargetValues) function outputTargetValues() { let list = document.querySelectorAll("li"); while (x < list.length) { storedListValue.push(list[x].innerHTML); //using template literals and dataset to store the value console.log(storedListValue[x] + " This is storedListValue Data"); list[x].innerHTML += `<button data-val ='${list[x].innerHTML}'>Select Item</button>`; y++; x++; } document.querySelectorAll('button').forEach((item) => { item.addEventListener('click', function() { console.log(this.dataset.val) }) }) } function output(itemName) { console.log(itemName); } function callMeOutput() { console.log(y); return storedListValue[x]; }

 <h3>Shirts</h3> <ul id='list'> <li id='i1'>Biker Jacket</li> <li id='i2'>Mens Shirt</li> </ul> <button type="button" id="otTargetVal">Test1</button>

Answer 3

您必須用引號將控制台參數包裝起來。 您可以使用允許嵌入表達式且更簡單易用的模板文字。 當值為文本時，我還建議您使用textContent而不是innerHTML ，因為它更快更可靠。

改變

('<button onClick="console.log(' + list[x].innerHTML + ');">Select Item</button>');

到

`<button onClick='console.log("${list[x].textContent}")'>Select Item</button>`

 let storedListValue = []; let y = 0, x = 0; function outputTargetValues(){ let list = document.querySelectorAll("li"); console.log(list.length); while(x < list.length){ storedListValue.push(list[x].textContent); console.log(storedListValue[x] + " This is storedListValue Data"); var v = list[x].textContent; list[x].innerHTML += `<button onClick='console.log("${v}")'>Select Item</button>`; y++; x++; } } function output(itemName){ console.log(itemName); } function callMeOutput(){ console.log(y); return storedListValue[x]; }

 <h3>Shirts</h3> <ul id='list'> <li id='i1'>Biker Jacket</li> <li id='i2'>Mens Shirt</li> </ul> <button onClick="outputTargetValues();">Test</button>