Блог

Я не программист или разработчик и нанял разработчика из Fiver, чтобы внести некоторые изменения в шаблон веб-сайта html5, который я модифицирую как игру для своей дочери, чтобы только она его видела. Разработчик действительно борется с всплывающим изображением javascript, и я ищу помощи

Что я хочу, чтобы произошло

• при нажатии кнопки появляется окно ввода кода. Если пользователь вводит изображение 1234 max1.jpg всплывает
• при нажатии кнопки появляется окно ввода кода. Если пользователь вводит изображение 2345 max2.jpg всплывает

Ниже приведен код разработчиков, который выглядит немного неуклюжим и плохо работает — изображения обрезаны. Любая помощь будет оценена и нужно ли где-то указывать размеры изображений?

Код кнопки

 <a class="btn btn-primary js-scroll-trigger" href="#about" id="but" onclick="myFunction()">CODE</a>
  

В теле

 <img id="image1" src="assets/img/max1.jpg" width="100%"   style="visibility: hidden;">
<img id="image2" src="assets/img/max2.jpg" width="100%"   style="visibility: hidden;">
<img id="image3" src="assets/img/max3.jpg" width="100%"   style="visibility: hidden;">
  

 <script>
   var modal = document.getElementById("myModal");
   var m1 = document.getElementById("m1");
   var btn = document.getElementById("myBtn");
   var span = document.getElementsByClassName("close")[0];
   span.onclick = function() {
     modal.style.display = "none";
   }

   function myFunction() {


    var code = prompt("Enter Code:", "");
    
     if (code == "1234") 
     {
         // m1.style.width = "70%";
     document.getElementById("image2").style.display = "none";
     document.getElementById("image3").style.display = "none";


          document.getElementById("image1").style.display = "block";

     document.getElementById("image1").style.visibility = "visible";
     // document.getElementById("image1").style.width = "100%";
     // document.getElementById("image1").style.height = "100%";
     modal.style.display = "block";
    
     } 

     else if (code == "2345") {
         // m1.style.width = "70%";
     document.getElementById("image1").style.display = "none";
      document.getElementById("image3").style.display = "none";

     document.getElementById("image2").style.display = "block";

     document.getElementById("image2").style.visibility = "visible";
     // document.getElementById("image2").style.width = "100%";
     // document.getElementById("image2").style.height = "100%";
     modal.style.display = "block";
     }

        else if (code == "3456") {
         // m1.style.width = "70%";
     document.getElementById("image1").style.display = "none";
     document.getElementById("image2").style.display = "none";


     document.getElementById("image3").style.display = "block";

     document.getElementById("image3").style.visibility = "visible";
     // document.getElementById("image2").style.width = "100%";
     // document.getElementById("image2").style.height = "100%";
     modal.style.display = "block";
     }


       else if (code == "4567") {
         window.open("Instructions.pdf", '_blank');
       }
       else if (code == "5678") {
         window.open("Instructions.pdf", '_blank');
       }

       }       
</script>