Как я могу связать переменную 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>

Я ожидал получить переменную, которая изменит значение в элементе Abena_Natale, когда Javascript заявит. Вместо этого он остается прежним.

Answer 1

Это не то, как вы получаете доступ к объектной модели документов (DOM) с помощью JS.Вам нужно получить элемент, используя один из нескольких методов, и , а затем изменить данные.

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>

Answer 2

Произошла ошибка в вашем 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>