Js，在事件上将参数传递给函数

Question

I'm trying to pass arguments to a function i created, but i guess i'm missing something... Here's what i want to do: on event mouseover, the word and its translation get red. On event mouseout, these two words return black. I started from this point - pure JavaScript (no function involved):

<span id ="e1" onmouseover="document.getElementById('c1').style.color='red'"
      onmouseout = "document.getElementById('c1').style.color='black'"> House </span>

I know i can use "this.style.color" but for my final target it's not useful... So, i used that approach to create a function. On event, arguments are passed to the function, and it colors the words, identifying them with the "getElementById". I thought it was a good idea and that it would have been:

<span id ="e1" onmouseover="color(e1,f1)" onmouseout="uncolor(e1,f1)"> House </span>    

<span id ="f1" onmouseover="color(e1,f1)" onmouseout="uncolor(e1,f1)">  Maison </span>

<!-- The script in js would be: -->

<script>
function color(e, f) {
  document.getElementById("e").style.color = "red";
  document.getElementById("f").style.color = "red";   
}
function uncolor(e, f) {
  document.getElementById("e").style.color = "black";    
  document.getElementById("f").style.color = "black";
}
</script>

I understand that it's a problem about passing arguments (i tried to pass a single argument to a function containing "alert(arg)" and it did not work). I found something about the fact that the function receives the event itself as an argument, but i don't really know if it's the right direction or what...

Any hint will be appreciated, thanks.

Answer 1

1st approach

You need to make 2 updates.

Update html ( Add quotes around parameters )

<span id ="e1" onmouseover="color('e1','f1')" onmouseout="uncolor('e1','f1')"> House </span>    

<span id ="f1" onmouseover="color('e1','f1')" onmouseout="uncolor('e1','f1')">  Maison </span>

Update your script ( Remove quotes when using in function )

<script>
function color(e, f) {
  document.getElementById(e).style.color = "red";
  document.getElementById(f).style.color = "red";   
}
function uncolor(e, f) {
  document.getElementById(e).style.color = "black";    
  document.getElementById(f).style.color = "black";
}
</script>

2nd approach

No html update. Update your script to following

<script>
function color(e, f) {
  e.style.color = "red";
  f.style.color = "red";   
}
function uncolor(e, f) {
  e.style.color = "black";    
  f.style.color = "black";
}
</script>

Answer 2

By using (this) it's more simple .

Updated Code

<span id ="e1" onmouseover="color(this)" onmouseout="uncolor(this)"> House </span>

<span id ="f1" onmouseover="color(this)" onmouseout="uncolor(this)">  Maison </span>

By Using "this" you pass the full control to function.

  function color(control) {
  control.style.color = "red";
  control.style.color = "red";   
  }

 function uncolor(control) {
  control.style.color = "black";    
  control.style.color = "black";
 }

Answer 3

Perhaps I'm missing the point, but this should all be done in CSS if at all possible. You can use the adjacent sibling selector + or general sibling selector ~ to get the translation that appears after the word. However, there's no widely supported way to go from the translation to a previous sibling. The easiest way to overcome that is to put both elements inside another container.

Simplified HTML:

<div class="word-pair">
    <span id ="e1" class="word"> House </span>    
    <span id ="f1" class="translation">  Maison </span>
</div>

CSS:

div.word-pair span{
    color:#000;
    transition:all .2s ease-in-out;
}
div.word-pair:hover span {
    color:red;
}

Fiddle Example: http://jsfiddle.net/kw7wyux4/