-1

The code at the bottom is not recognized but I don't know why. Can anyone see the problem?

The code of my whole JavaScript-File is:

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();

And the according html I want to change is:

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

My goal is that the arrow disappears when the screen width is lower than 1024px but the code at the bottom is not recognized I think.

wallzry
  • 115
  • 9
  • 1
    Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) – Ivar Aug 04 '20 at 14:42
  • Yup, as was said, just use `document.querySelector(".hunde")`, `getElementsByClassName` return collection of elements, or just use `getElementsByClassName("hunde")[0]`, but `querySelector` is better – rostegg Aug 04 '20 at 14:44
  • I already tried query selector and getElementById but it doesn't work either^^ – wallzry Aug 04 '20 at 15:27
  • I know the Problem!^^ – wallzry Aug 04 '20 at 15:30
  • Here is my whole JavaScript code and at the bottom is the code which is not working: – wallzry Aug 04 '20 at 15:31
  • oh the code is to long to post.. one moment please – wallzry Aug 04 '20 at 15:31
  • const navSlide = () => { ... } navSlide(); – wallzry Aug 04 '20 at 15:34
  • and underneth comes the JavaScript code from above $(window).resize(function() { ... – wallzry Aug 04 '20 at 15:35

4 Answers4

1

document.getElementsByClassName() returns a list of html elements. If you want to select a single target it's best to use document.getElementById()

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

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

If you want to edit all elements with the given class, you have to loop over them

for(const element of document.getElementsByClassName("hunde")) {
  element.innerHTML = "Your HTML here";
}
Jannes Carpentier
  • 1,838
  • 1
  • 5
  • 12
0

getElementsByClassName returns an array-like collection of items, so you need to access each element individually:

var elements = document.getElementsByClassName("hunde");
var numElements = elements.length;
for (var i = 0; i < numElements; i++) {
  elements[i].innerHTML = "..."
}
Ivar
  • 6,138
  • 12
  • 49
  • 61
Dan Mullin
  • 4,285
  • 2
  • 18
  • 34
  • I have only one element with that class^^ also tried id already – wallzry Aug 04 '20 at 15:23
  • It still returns an array even when there is only one element. You would access it like this if you don't want to loop through 1 item :) --> document.getElementsByClassName("hunde")[0] – Dan Mullin Aug 04 '20 at 15:26
  • ah okay, now I understand that part. thanks. I found the problem now. it's my code. I already defined a function above and just put that code underneath it. now JavaScript doesn't recognize it. – wallzry Aug 04 '20 at 15:33
0

if the inner width is exactly 1024 it may not know what to do. have you tried "<=" or ">=" ? e.g.

if (window.innerwidth() <= 1024)
{
    document.getElementById("link_id").innerHTML = "newStringValue";
}
David McRae
  • 3
  • 3
-1

I think that I find your problem you are using javascript and the window resize code that you're using is for 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>
Nahuen
  • 71
  • 5