Изображение появляется после выбора из приглашения с JS - PullRequest
Новая
       19

Изображение появляется после выбора из приглашения с JS

1 голос
/ 29 сентября 2019

После того, как пользователь ввел соответствующий выбор, мне нужно использовать условный оператор, который сравнивает входные данные с моими вариантами выбора, а затем отображать изображение на веб-странице.Я знаю, что каким-то образом я должен использовать отображение CSS и, возможно, оператор if / then, но я не совсем уверен, как и где.До сих пор у меня есть это в моем JavaScript.Я не уверен, что мне следует использовать, чтобы, если пользователь вводит «красный», изображение появляется (это будет связано с Хогвартсом).Любые советы в правильном направлении? 

function myFunction() {
    var text;
  var favColor = prompt("What color appeals most to you out of red, green, blue, or yellow?", "Let the game begin");
  switch(favColor.toLowerCase()) {
    case "blue":
      text = "Sounds like you like to think";
      break;
    case "red":
      text = "Feeling bold?";
      break;
    case "green":
      text = "Really? Interesting choice";
      break;
      case "yellow":
        text = "How very clever of you!"
          break;
    default:
      text = "C'mon! Pick one!";
  }
  document.getElementById("demo").innerHTML = text;
}

1 Ответ

0 голосов
/ 29 сентября 2019

Вы можете добавить элемент <img id="my-image" /> на свою страницу и изменить атрибут изображения src на основе ответа пользователя: 

var text;
var src;
var favColor = prompt("What color appeals most to you out of red, green, blue, or yellow?", "Let the game begin");
switch(favColor.toLowerCase()) {
  case "blue":
    text = "Sounds like you like to think";
    src = 'blue_img.jpg';
    break;
  case "red":
    text = "Feeling bold?";
    src = 'red_img.jpg';
    break;
  case "green":
    text = "Really? Interesting choice";
    src = 'green_img.jpg';
    break;
    case "yellow":
    text = "How very clever of you!"
    src = 'yellow_img.jpg';
        break;
  default:
    text = "C'mon! Pick one!";
}
document.getElementById("demo").innerHTML = text;
if( src ){
  document.getElementById( 'my-image' ).src = src;
}

Это лучше, чем сделать 4 скрытых изображения, которые будут отображаться на дисплее: блокировать, потому что браузерзагружает даже скрытые изображения.

...