Make a single click onclick

Asked

Viewed 128 times

-1

Good afternoon, how to fire the method with a click on the TR?

follows code

<script> 
function exibe(id) {  
    var display = document.getElementById(id).style.display;
    if( display === "none") {  
        document.getElementById(id).style.display = "inline";  
    } else {  
        document.getElementById(id).style.display = "none";  
    }     
}
</script>

<h1 class="musc"> Músculos </h1>
<table id="musc">
    <tr onclick="exibe('localdador');"> 
        <td class="ce"> 
            <input type="radio" name="tMusculos" id="c17" value="Imagem 1" onClick="mudarimagem(1)"> 
        </td> 
        <td class="cd"> 
            <label for="c17"> Anterior </label> 
        </td> 
   </tr> 
</table>
javascript
  • 1

    onclick in php does not exist, this is javascript, rephrase the question and put what you want to do with the click, can not understand what you need

  • Your code is incomplete in addition to containing errors, missing function mudarimagem(i) the image tag is missing, who is this variable id of getElementById(id)

  • That single click would be on which element? input radio or tr?

1 answer

0


In your case, marking input radio, evidently, you are clicking on the tr containing the input and consequently both tasks will be carried out, but the reciprocal is not true, that is, by clicking on the tr only the function inherent in tr will be fired. See in the following example:

function mudarimagem(i) {    
    if (i == 1) {
        document.getElementById("imagem").src="https://i.stack.imgur.com/1IncM.jpg";
    } else {            
    	document.getElementById("imagem").src="https://i.stack.imgur.com/Rj325.jpg";    
    }
}

function exibe(id) {  
   var display = document.getElementById('id').style.display;
   if( display === "none") {  
      document.getElementById('id').style.display = "inline";  
   } else {  
      document.getElementById('id').style.display = "none";  
   }     
}
<h1 id="id" class="musc"> Músculos </h1>   
   <table id="musc" border="0" width="200" bgcolor="#C0C0C0" height="100" style="border-collapse: collapse">
      <tr onclick="exibe('localdador');"> 
         <td class="ce"> <input type="radio" name="tMusculos" id="c17" value="Imagem 1" onclick="mudarimagem(1);"> </td> 
         <td class="cd"> <label for="c17"> Anterior </label> </td> 
      </tr> 
  </table>
  
  <img id="imagem" src="https://i.stack.imgur.com/Rj325.jpg">

There are a few ways to perform both functions with one click only.

Call a function inside the other function, so when calling one automatically will call the other.

Function displays(id) {
changeimage(1);

Example:

function mudarimagem(i) {    
	if (i == 1) {
        document.getElementById("imagem").src="https://i.stack.imgur.com/1IncM.jpg";
    } else {            
    	document.getElementById("imagem").src="https://i.stack.imgur.com/Rj325.jpg";    
    }
}

function exibe(id) {  
   mudarimagem(1);
   var display = document.getElementById('id').style.display;
   if( display === "none") {  
      document.getElementById('id').style.display = "inline";  
   }    
    else {  
      document.getElementById('id').style.display = "none";  
   }     
}
<h1 id="id" class="musc"> Músculos </h1>   
   <table id="musc" border="0" width="200" bgcolor="#C0C0C0" height="100" style="border-collapse: collapse">
      <tr onclick="exibe('localdador');"> 
         <td class="ce"> <input type="radio" name="tMusculos" id="c17" value="Imagem 1"> </td> 
         <td class="cd"> <label for="c17"> Anterior </label> </td> 
      </tr> 
  </table>
  
  <img id="imagem" src="https://i.stack.imgur.com/Rj325.jpg">

another way would be to separate the functions by ; (point and comma) in a single event onclick: <tr onclick="exibe('localdador'); mudarimagem(1);">

Another solution would be to pass a function that calls both:

<tr onclick="executar();">

and

function executar(){
    exibe('localdador');
    mudarimagem(1);
}

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.