如何在mousehover 上增加全局变量，但让它在mouseout 上恢复到正常值？

Question

Hi i'm new to javascript and is trying to create the following functionality.

I have 7 buttons. Some of these are hovered from the beginning. This depends on a numeric value fetched from the database. So when this value from the database is 4 then 4 buttons will be hovered

However, when hovering the "Remembered" or "Didn't remember" buttons, as seen in the picture below. The number of buttons that are hovered should change temporarily.

When "Remembered" is hovered - button 5 should also be hovered. When "Remembered" is not hovered - only 4 buttons should be hovered again.

When "DidNotRemember is hovered" - only button 1 should be hovered. When "DidNotRemember" is not hovered - only 4 buttons should be hovered again.

Below is my approach, and I don't quite understand why it doesn't work.

My code:

 var actualLeitnerbox = 4; // Dummy value. Will normally be fetched from database var leitnerbox = actualLeitnerbox; function rememberedHovered(leitnerbox) { leitnerbox += 1; return leitnerbox } function rememberedNotHovered(leitnerbox, actualLeitnerbox) { leitnerbox = actualLeitnerbox; return leitnerbox } function didNotRememberHovered(leitnerbox) { leitnerbox = 1; return leitnerbox } function didNotRememberNotHovered(leitnerbox, actualLeitnerbox) { leitnerbox = actualLeitnerbox; return leitnerbox } var header = document.getElementById("myDIV"); var btns = header.getElementsByClassName("btn"); for (var i = 0; i < leitnerbox; i++) { btns[i].classList.add("active"); }

 /* Style the buttons */ .btn { border: none; outline: none; padding: 10px 16px; background-color: #f1f1f1; cursor: pointer; font-size: 18px; } /* Style the active class, and buttons on mouse-over */ .active, .btn:hover { background-color: #666; color: white; }

 <button onmouseover="rememberedHovered()" onmouseout="rememberedNotHovered()" class="btn "> Remembered </button> <button onmouseover="didNotRememberHovered()" onmouseout="didNotRememberNotHovered()" class="btn "> Did Not Remember </button> <div id="myDIV"> <button class="btn">1</button> <button class="btn">2</button> <button class="btn">3</button> <button class="btn">4</button> <button class="btn">5</button> <button class="btn">6</button> <button class="btn">7</button> </div>

Thanks for reading this

Answer 1

First: Your functions function rememberedHovered(leitnerbox) and others accept parameters, but you do not pass them on hover event <button onmouseover="didNotRememberHovered()" onmouseout="didNotRememberNotHovered()" class="btn "> Did Not Remember </button> . Since leitnerbox and actualLeitnerbox are globals - you don't really need your functions to have them as parameters.

Second: You don't have a function to change the state of the buttons. This part of code

var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < leitnerbox; i++) {
  btns[i].classList.add("active");
}

will only work on first load, but won't change anything when you hover over the buttons. So you need it as a function as well and place it inside your onHover functions. And you also need to change this part a bit. Since the number of active buttons change, you will have to deactivate them somehow.

I hope this is your desired functionality:

 var actualLeitnerbox = 4; var leitnerbox = actualLeitnerbox; function rememberedHovered() { leitnerbox += 1; activate(); } function rememberedNotHovered() { leitnerbox = actualLeitnerbox; activate(); } function didNotRememberHovered() { leitnerbox = 1; activate(); } function didNotRememberNotHovered() { leitnerbox = actualLeitnerbox; activate(); } function activate(){ var header = document.getElementById("myDIV"); var btns = header.getElementsByClassName("btn"); for(let i = 0; i < btns.length; i++){ btns[i].classList.remove("active"); } for (var i = 0; i < leitnerbox; i++) { btns[i].classList.add("active"); } } activate();

 .btn { border: none; outline: none; padding: 10px 16px; background-color: #f1f1f1; cursor: pointer; font-size: 18px; } /* Style the active class, and buttons on mouse-over */ .active, .btn:hover { background-color: #666; color: white; }

 <button onmouseover="rememberedHovered()" onmouseout="rememberedNotHovered()" class="btn "> Remembered </button> <button onmouseover="didNotRememberHovered()" onmouseout="didNotRememberNotHovered()" class="btn "> Did Not Remember </button> <div id="myDIV"> <button class="btn">1</button> <button class="btn">2</button> <button class="btn">3</button> <button class="btn">4</button> <button class="btn">5</button> <button class="btn">6</button> <button class="btn">7</button> </div>

Answer 2

You should make each function do specific task

Moreover, leitnerbox and actualLeitnerbox in this case are undefined , because in the HTML, you call these function without any parameters

function rememberedHovered(leitnerbox) {
  // ...
}

function rememberedNotHovered(leitnerbox, actualLeitnerbox) {
  // ...
}

function didNotRememberHovered(leitnerbox) {
  // ...
}

function didNotRememberNotHovered(leitnerbox, actualLeitnerbox) {
  // ...
}

Below snippet should help you

 var actualLeitnerbox = 4; var leitnerbox = actualLeitnerbox; var header = document.getElementById("myDIV"); var btns = header.getElementsByClassName("btn"); function hover(i) { btns[i].classList.add("active"); } function unhover(i) { btns[i].classList.remove("active"); } function hoverAll() { for (var i = 0; i < actualLeitnerbox; i++) hover(i) } function unhoverAll() { for (var i = 0; i < actualLeitnerbox; i++) unhover(i) } function rememberedHovered() { hover(actualLeitnerbox) } function rememberedNotHovered() { unhover(actualLeitnerbox) } function didNotRememberHovered() { unhoverAll() hover(0) } function didNotRememberNotHovered() { unhoverAll() hoverAll() } for (var i = 0; i < leitnerbox; i++) { btns[i].classList.add("active"); }

 /* Style the buttons */ .btn { border: none; outline: none; padding: 10px 16px; background-color: #f1f1f1; cursor: pointer; font-size: 18px; } /* Style the active class, and buttons on mouse-over */ .active, .btn:hover { background-color: #666; color: white; } #myDIV { margin-top: 5rem; }

 <button onmouseover="rememberedHovered()" onmouseout="rememberedNotHovered()" class="btn "> Remembered </button> <button onmouseover="didNotRememberHovered()" onmouseout="didNotRememberNotHovered()" class="btn "> Did Not Remember </button> <div id="myDIV"> <button class="btn">1</button> <button class="btn">2</button> <button class="btn">3</button> <button class="btn">4</button> <button class="btn">5</button> <button class="btn">6</button> <button class="btn">7</button> </div>