javascript slide in div on image click?

Question

I'm trying to get the yellow div to slide up when clicking on the tree icon in the modal possibly without jQuery but I can't get it to work.

You can see the page I'm building here by clicking the first icon from left https://vivere-albero-verona.netlify.app/

I've tried different solutions but here's the code I have right now

html:

<div id="alberi" class="alberi">
      <div id="acero">
          <img src="./images/tree.png">
          <h1>ACERO CAMPESTRE</h1>
          <h2>Altezza: 7,0m</h2>
          <h2>Ingombro: 2,0m</h2>
          <h2>Fornitore</h2>
      </div>
</div>

css:

.alberi{
    background-color: green;
    display: flex;
    height: 0px;
    width: 90.9%;

    position: absolute;
    bottom: 0;
    border-bottom-left-radius: 30px;
}

.slided{
    height: 270px;}

js:

const sezionealberi = document.querySelector('#alberi')
const pulsantealberi = document.querySelector('#m-tree')

pulsantealberi.addEventListener('click', primavera)

let mezzastagione = 1;

function primavera()
{
    if(mezzastagione == 1) 
    { 
        sezionealberi.innerHTML = `<class = "alberi slided">`;
        mezzastagione = 0;
    }
    
    else{
        sezionealberi.innerHTML = `<class = "alberi">`;
        mezzastagione = 1;
    }
}

score 1 · Answer 1 · answered Jan 05 '23 at 22:50

1

You shouldn't be assigning to innerHTML to change a class attribute, and should be using classList instead:

function primavera()
{
    if(mezzastagione == 1) 
    { 
        sezionealberi.classList.add('slided');
        mezzastagione = 0;
    }
    
    else{
        sezionealberi.classList.remove('slided')
        mezzastagione = 1;
    }
}

answered Jan 05 '23 at 22:50

Live bug help - www.dialect.so

1,416
1
2
11

I tried that too but I still would get a type error "Cannot read property 'classList' of null" and I don't understand why – Bale Jan 05 '23 at 23:00
1

That's because your querySelector isn't finding the element (see https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Live bug help - www.dialect.so Jan 05 '23 at 23:01

score 0 · Answer 2 · edited Feb 22 '23 at 17:29

The other answer has provided great insights about your code, but I would like to help you solve the "Cannot read property 'classList' of null" problem.

You're trying to get the element before it's loaded, use DOMContentLoaded to get the element after it's loaded on the page. Refer to the code bellow:

window.addEventListener('DOMContentLoaded', () => {
    const sezionealberi = document.querySelector('#alberi')
    const pulsantealberi = document.querySelector('#m-tree')

    // mezzastagione == 1 is redundant use a boolean instead
    let mezzastagione = true;

    const primavera = () => {
        if(mezzastagione) { 
            sezionealberi.classList.add('slided');
            mezzastagione = false;

        } else {
            sezionealberi.classList.remove('slided');
            mezzastagione = true;
        }
    }

    pulsantealberi.addEventListener('click', primavera);
});

thanks for the help! I'm still getting the 'cannot read properties of null classlist though — Bale, Jan 06 '23 at 11:03

javascript slide in div on image click?

2 Answers2