Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
130 views
in Technique[技术] by (71.8m points)

javascript - How to display diffrent images using if function after pressing a button

For my collage assignment i need to create a html webpage where if you press the button yes it displays a number and a corresponding image. i have figured out how to create the random number but cannot get the corresponding image to show up when the button in pressed. i am very new to this and any help would be appreciated

This is the java script

function randomNumber() {
  var ranNumgen = Math.floor((Math.random() * 6) + 1);
}

console.log("randomNumber");
if ("number" == 1) {
  document.getElementById('img1').src = "image/dice1.jpg";
} else if ("number" == 2) {
  document.getElementById('img1').src = "image/dice2.jpg";
} else if ("number" == 3) {
  document.getElementById("img1").src = "image/dice3.jpg"
} else if ("number" == 4) {
  document.getElementById("img1").src = "image/dice4.jpg";
} else if ("number" == 5) {
  document.getElementById("img1").src = "image/dice5.jpg";
} else if ("number" == 6) {
  document.getElementById("img1").src = "image/dice6.jpg";
}
<head>
  <title></title>
  <button id="b" onclick="ranNumgen()"> Yes </button>
  <button onclick="Num2button()">No</button>
</head>

<body>
  <p id="number"> </p>


And this is all my code 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <button id="b" onclick="ranNumgen()">   Yes </button>
    <button onclick="Num2button()">No</button>
</head>
<body>
    <p id="number"> </p>

    <script type="text/javascript">

        function randomNumber() {
        var ranNumgen = Math.floor((Math.random() *6) +1);      
}
    
    console.log("randomNumber");
    if ("number" ==1 ) {
        document.getElementById('img1').src ="image/dice1.jpg";
    }

   else if ("number" ==2) {
    document.getElementById('img1').src ="image/dice2.jpg";
   }
   else if ("number"==3) {
    document.getElementById("img1").src="image/dice3.jpg"
   } 
   else if ("number"==4) {
document.getElementById("img1").src="image/dice4.jpg";
   }
   else if ("number"==5) {
        document.getElementById("img1").src="image/dice5.jpg";
   }
   else if ("number"==6) {
        document.getElementById("img1").src="image/dice6.jpg";
   }

        function Num2button() {
        var button2 = "Are you sure"
        alert(button2);
            }


    </script>
    




</body>
                    
</html>
question from:https://stackoverflow.com/questions/66051098/how-to-display-diffrent-images-using-if-function-after-pressing-a-button

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You can put your logic to assign the picture in your randomNumber function, the best would be to rename it to something like generateRandomPicture.

Then you need an element with the id you have specified and also I would recommend that you use an eventListener instead of doing the inline scripting.

You can add .addEventListener() to your element.

document.getElementById('b').addEventListener('click', randomNumber);

document.getElementById('b').addEventListener('click', randomNumber);

function randomNumber() {
  let number = Math.floor((Math.random() * 6) + 1);

  if (number == 1) {
    document.getElementById('img1').src = "image/dice1.jpg";
  } else if (number == 2) {
    document.getElementById('img1').src = "image/dice2.jpg";
  } else if (number == 3) {
    document.getElementById("img1").src = "image/dice3.jpg"
  } else if (number == 4) {
    document.getElementById("img1").src = "image/dice4.jpg";
  } else if (number == 5) {
    document.getElementById("img1").src = "image/dice5.jpg";
  } else if (number == 6) {
    document.getElementById("img1").src = "image/dice6.jpg";
  }

}
<head>
  <title></title>

</head>

<body>
  <p id="number"> </p>
  <img id="img1"></img>
  <button id="b"> Yes </button>
  <button onclick="Num2button()">No</button>
</body>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...