Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
129 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 Reply

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...