制作更大并将按钮恢复为原始大小的Javascript

Question

I have a project to make 2 buttons that containing value before and after test score.

The student is 50 and every student have 2 buttons that containing their previous and present test score in some subject. the button is placed in 2 columns Before and After, sorted by highest score and resize them depending on their score. So we don't know how to identify which was the pair of those buttons.

So I decide to make if that "id" of pairing button is same eg: id="Score1" and id="Score1_a"

Progress now, I make the pairing button in "Before" and "After" Columns change their color to Red if we hover mouse on one of them.

But it's still not enough.. So I use script to make the buttons bigger when we hover on it, but I don't know how to Revert it back to original size. Can you guys help me?

This is my script:

 <script>
  function mouseover(obj) {
 var id2=obj.id+"_a";
document.getElementById(obj.id).style.background = "magenta";
document.getElementById(obj.id).style.width = "100px";
document.getElementById(obj.id).style.height = "100px";
document.getElementById(id2).style.background = "magenta";
    }
  function mouseout(obj) {
 var id2=obj.id+"_a";
document.getElementById(obj.id).style.background = "deepskyblue";
document.getElementById(id2).style.background = "deepskyblue";
document.getElementById(obj.id).style.offsetwidth;
document.getElementById(obj.id).style.offsetheight;
   }
</script>

  <button id="score1" style='width:70px; height:70px;'>70</button>
  <button id="score1_a" style='width:65px; height:65px;'>65</button>
   <button id="score2" style='width:25px; height:25px;'>25</button>
   <button id="score2_a" style='width:50px; height:50px;'>50</button> 

Thanks.

Answer 1

Not sure what is that you are trying to achieve but based on my understanding i am retaining its original dimensions on mouse out. There are multiple ways we can achieve this in more efficient way but make your code working you you will need to track the original height width and also its pair for each button. So solution can be,

function mouseover(obj, pairId) {
  
    var id2=pairId;

    document.getElementById(obj.id).style.background = "magenta";
    document.getElementById(obj.id).style.width = "100px";
    document.getElementById(obj.id).style.height = "100px";
    document.getElementById(id2).style.background = "magenta";
}
function mouseout(obj, pairId, actualDim) {

    var id2=pairId;

    document.getElementById(obj.id).style.background = "deepskyblue";
    document.getElementById(id2).style.background = "deepskyblue";
    document.getElementById(obj.id).style.width = actualDim.w;
    document.getElementById(obj.id).style.height = actualDim.h;
}

 <button id="score1" style='width:70px; height:70px;' onmouseover="mouseover(this, 'score1_a')" onmouseout="mouseout(this, 'score1_a', {w:'70px', h:'70px'})">70</button>
  <button id="score1_a" style='width:65px; height:65px;' onmouseover="mouseover(this, 'score1')" onmouseout="mouseout(this, 'score1', {w:'65px', h:'65px'})">65</button>
  <button id="score2" style='width:25px; height:25px;' onmouseover="mouseover(this, 'score1')" onmouseout="mouseout(this, 'score1', {w:'25px', h:'25px'})">25</button>
  <button id="score2_a" style='width:50px; height:50px;' onmouseover="mouseover(this, 'score1')" onmouseout="mouseout(this, 'score1', {w:'50px', h:'50px'})">50</button> 

</div>