Javascript onmouseover, onmouseout [closed]-CodePudding

There's has to be a easier way to do this... I'm trying to use getElementByClassName etc and doesn't work.

Also I want to change the image to hover to another image on this code. By hovering over one achor or something else.

The whole purpose of this. Is to hover over a image to change the image to another image and at the same time change the background color, some colors, paragraph colors etc.... almost like using dark mode.

I want to make the code more dry and the anchor tag used on the image (shoe) tag.

Heres a live example https://elated-newton-c33132.netlify.app

        function stext() {
        var x = document.getElementById("body");
        var y = document.getElementById("rightBg");
        var a = document.getElementById("changeH1");
        var b = document.getElementById("changeParagraph");
        var c = document.getElementById("changeH3");
        var d = document.getElementById("changeLogo");
        var e = document.getElementById("changeHeroTrailer");
        var f = document.getElementById("changeLine1");
        var g = document.getElementById("changeLine2");
        var g = document.getElementById("changeImg");

        x.style.backgroundColor = '#293144de';
        y.style.backgroundColor = '#EC3565';
        a.style.color = 'white';
        b.style.color = 'white';
        c.style.color = 'white';
        d.style.color = 'white';
        e.style.color = 'white';
        f.style.color = 'white';
        g.style.color = 'white';
        
    }

    function htext() {
        var x = document.getElementById("body");
        var y = document.getElementById("rightBg");
        var a = document.getElementById("changeH1");
        var b = document.getElementById("changeParagraph");
        var c = document.getElementById("changeH3");
        var d = document.getElementById("changeLogo");
        var e = document.getElementById("changeHeroTrailer");
        var f = document.getElementById("changeLine1");
        var g = document.getElementById("changeLine2");

        x.style.backgroundColor = 'white';
        y.style.backgroundColor = '#626262';
        a.style.color = '#626262';
        b.style.color = '#626262';
        c.style.color = '#626262';
        d.style.color = '#626262';
        e.style.color = 'white';
        f.style.color = 'white';
        g.style.color = 'white';
    }

<a onmouseover="stext()" onmouseout="htext()" class="btnOne" href="#">ADD TO CART</a>

CodePudding user response：

document.getElementByClassName is not a function, use document.getElementsByClassName instead.

This will return an array with the matched elements.

CodePudding user response：

If you like easier ways to do javascript you should look into jQuery :)

You could put these into 1 function for a start, you could also define these in the global context as constants.

For example:

const body = document.getElementById("body");

As for targeting multiple elements. You can use querySelectorAll. Simple console.log the result to see what you're working with. But if you have multiple things you'd like to use color white on for example, simply give them a class name that will allow you to target all elements.

 function stext() {
        var x = document.getElementById("body");
        var y = document.getElementById("rightBg");
        var a = document.getElementById("changeH1");
        var b = document.getElementById("changeParagraph");
        var c = document.getElementById("changeH3");
        var d = document.getElementById("changeLogo");
        var e = document.getElementById("changeHeroTrailer");
        var f = document.getElementById("changeLine1");
        var g = document.getElementById("changeLine2");
        var g = document.getElementById("changeImg");

        x.style.backgroundColor = '#293144de';
        y.style.backgroundColor = '#EC3565';
        a.style.color = 'white';
        b.style.color = 'white';
        c.style.color = 'white';
        d.style.color = 'white';
        e.style.color = 'white';
        f.style.color = 'white';
        g.style.color = 'white';
        x.style.backgroundColor = 'white';
        y.style.backgroundColor = '#626262';
        a.style.color = '#626262';
        b.style.color = '#626262';
        c.style.color = '#626262';
        d.style.color = '#626262';
        e.style.color = 'white';
        f.style.color = 'white';
        g.style.color = 'white';
        
    }

As for your second question. You can change this with CSS, but I've also included a javascript solution.

function changeImage() {
 const bg = document.querySelector('.bg');
 bg.style.background = 'url("https://picsum.photos/300/300")';
}

function handleMouseOut() {
 const bg = document.querySelector('.bg');
 bg.style.background = 'url("https://picsum.photos/200/300")';
}

.bg {
  height: 400px;
  background-image: url('https://picsum.photos/200/300');
}
.btnOne::hover .bg {
  background-image: url('https://picsum.photos/300/300');
}

<div class='bg'>
<a onmouseover="changeImage()" onmouseout="handleMouseOut()" class="btnOne" href="#">ADD TO CART</a>
<div>