如何将JavaScript变量链接到HTML值？

Question

我需要将表中的项目链接到Javascript变量，但不会链接。 我认为改变价值还会有其他问题。

我正在Atom Editor上运行，并安装了脚本包，但如果需要可以将脚本复制到Notepad ++或Brackets中。

</tr>
    <td>Abena</td>
    <td>Natale</td>
    <td id = "Abena_Natale">11782</td>
    <td>No.1</td>
    <td>Monarch of Boars</td>
</tr>

<script>
var Abena_Natale = ""

</script>

我希望得到一个变量，当Javascript声明时，该变量会更改Abena_Natale元素中的值。 相反，它保持不变。

Answer 1

您的HTML中有一个错误。 从那里我们需要编写选择器来获取元素。 然后在节点内部获取内容。

更新以支持编辑。

 var Abena_Natale = ""; var abenaElement; document.addEventListener('DOMContentLoaded', function() { abenaElement = document.querySelector('#Abena_Natale'); Abena_Natale = abenaElement.innerHTML; console.log(Abena_Natale); // Update the value abenaElement.innerHTML = "Testing"; }); 

 <table> <tr> <td>Abena</td> <td>Natale</td> <td id="Abena_Natale">11782</td> <td>No.1</td> <td>Monarch of Boars</td> </tr> </table> 

Answer 2

那不是用JS访问文档对象模型（DOM）的方式 。 您需要使用多种方法中的一种来获取元素， 然后修改数据。

1）确保表格行元素已正确打开和关闭。

2）使用document.getElementById('Abena_Natale')或document.querySelector('#Abena_Natale')来抓取元素。

3）设置textContent 。 value通常用于input元素。

 const aN = document.getElementById('Abena_Natale'); aN.textContent = 'This has been changed'; 

 <table> <tr> <td>Abena</td> <td>Natale</td> <td id="Abena_Natale">11782</td> <td>No.1</td> <td>Monarch of Boars</td> </tr> </table>