How to make images change with an IF conditional in javascript

Question

How to make images change with an IF conditional in javascript

Navigation

#1 by (2 votes)

2

Here is the html code:

<html>
    <head>
        <title> DateFast </title>
        <script type="text/javascript" src="BrandonWelding_67824.js"></script>
    </head>
    <body>
         <center>
             <img src= "corazon.jpg">
             <h1> DateFast </h1>
         </center>
         <table style="width: 100%;"    >
             <tr>
                 <th style="    width: 20%;">Datos</th>
                 <th style="    width: 40%;">Resultados</th>
             </tr>
             <tr>
                <h2>Introducir su edad:</h2>
                <input type="number" value="18" min="18" max="40" id="edad">
                <br> </br>
                <h2>Intruducir sexo:</h2>
                <input type="radio" name="gender" value="Hombre" id="hombre">Hombre
                <input type="radio" name="gender" value="Mujer" id="mujer">Mujer
                <br> </br>
                <button style="margin-top: 20px, padding:10px 0px 10px 0px;" id="boton" value="uno" onclick="calcular()">Conseguir Pareja...</button>
                <table style="height: 100%; ">  
                    <th style="height:  300px;" >   
                        <img style="width:  100%; height: 100%;" src="Base.png" id="imgbase1">
                    </th>
                    <th style="height: 300px;"> 
                        <img style="width:  100%; height: 100%;" src="Base.png" id="imgbase2">
                    </th>
                    <th style="height:  300px;">    
                        <img style="width:  100%; height: 100%;" src="Base.png" id="imgbase3">
                    </th>
                </table>        
            </tr>
        </table>
    </body>
</html>

And the code in javascript:

function calcular(){

    var edad=document.getElementById("edad").value;
    var gender=document.getElementById("hombre").checked;
    var imagenacambiar1=document.getElementById("imgbase1");
    var imagenacambiar2=document.getElementById("imgbase2");
    var imagenacambiar3=document.getElementById("imgbase3");

    if (gender===("hombre"||"mujer"))
    {
        imagenacambiar1.src="jlaw.jpg"
        imagenacambiar2.src="estone.jpg"
        imagenacambiar3.src="girl3.jpg"
    }
    else
    {
        imagenacambiar1.src="h1.jpg"
        imagenacambiar2.src="h2.jpg"
        imagenacambiar3.src="h3.jpg"        
    }
}

javascript html5

asked by FourBar 12.09.2018 в 17:01

source

1 answer

Problem with mysql and php OLEDB conection goes down when processing a large number of files

score 2 · Answer 1

You have an error here if (gender===("hombre"||"mujer")) , this will return true always. What you need to do is put two separate conditions, like the following example:

if (gender === "hombre" || gender == "mujer") {}

It would be like this in your function calcular() :

function calcular(){
  var edad=document.getElementById("edad").value;
  var gender=document.getElementById("hombre").checked;
  var imagenacambiar1=document.getElementById("imgbase1");
  var imagenacambiar2=document.getElementById("imgbase2");
  var imagenacambiar3=document.getElementById("imgbase3");
  // si es mujer
  if (gender == "mujer")
  {
        imagenacambiar1.src="jlaw.jpg"
        imagenacambiar2.src="estone.jpg"
        imagenacambiar3.src="girl3.jpg"
  }
  // si es hombre
  else if(gender === "hombre") {
        imagenacambiar1.src="h1.jpg"
        imagenacambiar2.src="h2.jpg"
        imagenacambiar3.src="h3.jpg"        
  }
}