Change class properties on mouse enter

Question

I'm busting my head on this script because I don't understand why it isn't working because it's supposed to be very simple, I just want to show and hide a certain div or change it's properties.

Javascript:

function show(x){
    var y = document.getElementByClassName(x);
    y.style.display= 'block';

}
function hide(x){
    var y = document.getElementByClassName(x);
    y.style.display = 'none';

}

HTML:

<a href='http://dreamspark.e-uvt.ro/dreamspark/'target='_blank'onmouseover='show('divdreamspark')'onmouseleave='hide('divdreamspark')'>

CSS:

.divdreamspark {
    display: none;
}

I don't see what I'm doing wrong.

`getElementByClassName` returns **collection** of elements, you've to iterate over them — Tushar, Apr 05 '16 at 09:42
`getElementByClassName` returns `array-like` nodelist...Use `loop` or `[0]` if only one element is there in the `DOM` — Rayon, Apr 05 '16 at 09:42
not elementBy its elementsBy correct sentence is var y =document.getElementsByClassName(x).[0]; y.style.display = 'none'; — code.rider, Apr 05 '16 at 09:46
Typo there, missing `s`. Should be _getElement**s**ByClassName_ — Tushar, Apr 05 '16 at 09:48

Jai · Accepted Answer · 2016-04-05T10:17:42.540

1

There are multiple issues:

You have messed the single quotes in the markup.
There is a typo with the method .getElementsByClassName missing s in the Element part.

update the markup:

<a href='http://dreamspark.e-uvt.ro/dreamspark/'target='_blank' 
   onmouseover='show("divdreamspark")' 
   onmouseleave='hide("divdreamspark")'>

Update the js:

function show(x){
    var y = document.getElementsByClassName(x)[0]; // <---missing s in Element
    y.style.display= 'block';
}
function hide(x){
    var y = document.getElementsByClassName(x)[0]; // <---missing s in Element
    y.style.display = 'none';
}

If the element is single then suffix [0] at the selector (although class selector returns a collection). If you are dealing with multiple elements then you have to use loop to iterate and hide each one of them.

function show(x) {
  var y = document.getElementsByClassName(x);
  [].forEach.call(y, function(i, el) {
    el.style.display = 'block';
  });

}

function hide(x) {
  var y = document.getElementsByClassName(x);
  [].forEach.call(y, function(i, el) {
    el.style.display = 'none';
  });
}

edited Apr 05 '16 at 10:17

answered Apr 05 '16 at 09:43

Jai

74,255
12
74
103

**Not just typo**, you should add this as comment – Tushar Apr 05 '16 at 09:43
Thanks for the tips, but I can't use " " quotation because all the is inside an echo I can use only single quotation ' ; – Alexandru Ianas Apr 05 '16 at 10:11
@AlexandruIanas then escape it with `\\`. – Jai Apr 05 '16 at 10:18
Thanks, it works, you're an absolute genius! – Alexandru Ianas Apr 05 '16 at 10:25
@AlexandruIanas You are welcome and glad this helped you. – Jai Apr 05 '16 at 10:47

Change class properties on mouse enter

1 Answers1