(Решено) У меня проблемы с .inner HTML не работает propperly

Question

Я не могу заставить работать часть "if", поэтому не выводит текст Test0 или Test1 в мой div "Test" после того, как я нажму одну из ссылок. Я проверил любые сообщения об ошибках, которых нет ни одного. я также добавил изменение цвета, чтобы проверить, были ли проблемы с прослушивателями событий, но это работало нормально. Так что моя единственная проблема в том, что я не могу получить текст для вывода.

var testEl = document.querySelector("#test");
var menyEl = document.querySelectorAll("a");
for (var i = 0; i < menyEl.length; i++) {
  menyEl[i].addEventListener("click", byttInfo);
}
function byttInfo(e) {
  if (e.target.className === "ikke_aktiv") {
    for (var i = 0; i < menyEl.length; i++) {
      menyEl[i].className = "ikke_aktiv";
    }
    e.target.className = "aktiv"
  }
  if (e.target.value === 0) {
    testEl.innerHTML = "Test0"
  } else if (e.target.value === 1) {
    testEl.innerHTML = "Test1"
  }
}

.innpakning {
  width: 80%;
  background-color: #708790;
  padding: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.loddrett_meny {
  display: flex, block;
  flex: 1;
  padding-top: 6px;
}

.loddrett_meny a {
  display: block;
  text-align: center;
  padding: 12px;
  margin: 4px;
  color: white;
  font-size: 20px;
  text-decoration: none;
}

.loddrett_meny a:hover {
  background-color: black;
  border-radius: 8px;
  transition: 0.75s;
}

.aktiv {
  background-color: #3cb500;
}

.ikke_aktiv {
  background-color: #555;
}

.innhold,
#test {
  flex: 6;
  height: auto;
  background-color: #a6d4a3;
  padding-left: 2px;
  border-radius: 2px;
  margin: 10px;
  margin-right: 0px;
  font-size: 20px;
}

<div class="innpakning">
  <div class="loddrett_meny">
    <a class="aktiv" value="0">Kapittel 20</a>
    <a class="ikke_aktiv" value="1">Kapittel 20.1</a>
  </div>
  <div id="test"></div>
</div>

Answer 1

Вам нужно использовать кавычки вокруг значений или конвертировать их в Number

if(e.target.value === "0"){
    testEl.innerHTML = "Test0"
}else if(Number(e.target.value) === 1){
    testEl.innerHTML = "Test1"
}

Answer 2

Добавление к сказанному Абдулой Прохо: Вы не можете добавить атрибут value к тегам a, поэтому он отбрасывается и e.target.value. Для этого вы можете использовать атрибуты данных:

var testEl = document.querySelector("#test");
var menyEl = document.querySelectorAll("a");
for (var i = 0; i < menyEl.length; i++) {
  menyEl[i].addEventListener("click", byttInfo);
}
function byttInfo(e) {
  if (e.target.className === "ikke_aktiv") {
    for (var i = 0; i < menyEl.length; i++) {
      menyEl[i].className = "ikke_aktiv";
    }
    e.target.className = "aktiv"
  }

  if (e.target.dataset.value === "0") {
    testEl.innerHTML = "Test0"
  } else if (e.target.dataset.value === "1") {
    testEl.innerHTML = "Test1"
  }
}

.innpakning {
  width: 80%;
  background-color: #708790;
  padding: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.loddrett_meny {
  display: flex, block;
  flex: 1;
  padding-top: 6px;
}

.loddrett_meny a {
  display: block;
  text-align: center;
  padding: 12px;
  margin: 4px;
  color: white;
  font-size: 20px;
  text-decoration: none;
}

.loddrett_meny a:hover {
  background-color: black;
  border-radius: 8px;
  transition: 0.75s;
}

.aktiv {
  background-color: #3cb500;
}

.ikke_aktiv {
  background-color: #555;
}

.innhold,
#test {
  flex: 6;
  height: auto;
  background-color: #a6d4a3;
  padding-left: 2px;
  border-radius: 2px;
  margin: 10px;
  margin-right: 0px;
  font-size: 20px;
}

<div class="innpakning">
  <div class="loddrett_meny">
    <a class="aktiv" data-value="0">Kapittel 20</a>
    <a class="ikke_aktiv" data-value="1">Kapittel 20.1</a>
  </div>
  <div id="test"></div>
</div>

Answer 3

Следующие работы я проверил как фрагмент. Попробуйте скопировать это полностью и замените его на js. вам нужно использовать метод getAttribute, чтобы получить значение.

var testEl = document.getElementById("test");;
var menyEl = document.querySelectorAll("a");
for (var i = 0; i < menyEl.length; i++) {
  menyEl[i].addEventListener("click", byttInfo);
}
function byttInfo(e) {
  if (e.target.className === "ikke_aktiv") {
    for (var i = 0; i < menyEl.length; i++) {
      menyEl[i].className = "ikke_aktiv";
    }
    e.target.className = "aktiv"
  }
  if (e.target.getAttribute("value") === "0"){
    testEl.innerText = "Test0"
  } else if (e.target.getAttribute("value") === "1") {
    testEl.innerText = "Test1"
  }
}

Answer 4

e.target.value не определено. Из-за якорных тегов обычно не имеют значения атрибута. Элементы 'a' не имеют прототипа данных для значения.

Вы должны попытаться получить значение, используя:

e.target.getAttribute('value')

Также при сравнении попробуйте использовать:

e.target.getAttribute('value') === '0'

Учитывая, что значение, которое вы получаете из функции getAttribute, является строкой, с которой сравниваемое значение также должно быть строкой.