Почему код внизу не выполняется?

Question

Код внизу не распознается, но я не знаю почему. Может ли кто-нибудь увидеть проблему?

Код всего моего JavaScript -файла:

const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');

burger.addEventListener('click', () => {
    //Toggle nav
    nav.classList.toggle('nav-active');

    //Animate Links
    navLinks.forEach((link, index) => {
        if(link.style.animation) {
            link.style.animation = '';
        }
        else {
            link.style.animation = `navLinkFade 0.5s ease forwards 0.5s`;
        }
    });
    //Burger animation
    burger.classList.toggle('toggle');

});

};

navSlide();

// dont show arrow at mobile - code is not recognized? :/ ...
window.resize(function() {

if (window.innerwidth() <= 1024) {

  document.getElementById("myElement").innerHTML = "Hunde";

} else if (window.innerwidth() >= 1024){

    document.getElementById("myElement").innerHTML = "Hunde&#8595;";

  }


  }).resize();

И соответствующий html, который я хочу изменить, это:

<a class="atag hunde" href="#">Hunde&#8595;</a>

Моя цель состоит в том, чтобы стрелка исчезла, когда ширина экрана меньше 1024 пикселей, но код внизу не распознается, я думаю ^^

PS: Я очень новичок в JavaScript :)

Answer 1

document.getElementsByClassName() возвращает список html элементов. Если вы хотите выбрать одну цель, лучше всего использовать document.getElementById()

<a id="myElement" class="atag hunde" href="#">Hunde&#8595;</a>

document.getElementById("myElement").innerHTML = "put html here";

Если вы хотите отредактировать все элементы с данным классом, вы должны l oop поверх них

for(const element of document.getElementsByClassName("hunde")) {
  element.innerHTML = "Your HTML here";
}

Answer 2

Я думаю, что я обнаружил, что ваша проблема: вы используете javascript, а код изменения размера окна, который вы используете, предназначен для jquery:

Javascript

window.onresize = function() {
    if (window.innerWidth <= 1024) {
        document.getElementById("link_id").innerHTML = "Hunde";
    } else if (window.innerWidth > 1024){
        document.getElementById("link_id").innerHTML = "Hunde&#8595;";
    }
}

jQuery

$(window).on('resize', function(){
    var win = $(this); 
    if (win.width() <= 1024) {
        document.getElementById("link_id").innerHTML = "Hunde";
    } else if (win.width() > 1024){
        document.getElementById("link_id").innerHTML = "Hunde&#8595;";
    }
});

HTML

<a class="atag hunde" id="link_id" href="#">Hunde&#8595;</a>

Answer 3

, если внутренняя ширина точно равна 1024, он может не знать, что делать. вы пробовали "<=" или "> ="? например,

if (window.innerwidth() <= 1024)
{
    document.getElementById("link_id").innerHTML = "newStringValue";
}

Answer 4

getElementsByClassName возвращает массив элементов, поэтому вам нужно получить доступ к каждому элементу индивидуально:

var elements = document.getElementsByClassName("hunde");
var numElements = elements.length;
for (var i = 0; i < numElements; i++) {
  elements[i].innerHTML = "..."
}