如何在JS中用图片替换div内容

时间：2019-02-22 14:25:57

标签： javascript

我已经在JS中创建了简单的计算器，我想添加一个选项，如果出现特定的分数，特定的图像将弹出。例如，3 + 3 = 9，除了数字photo也会出现。我有一个想法，但我不怎么用js图像替换html div。感谢任何帮助。 “如果”部分中的波兰语说明仅是说明，因此请忽略它。 

var lolek = document.createElement("IMG");
lolek.src = "math.jpg";
document.getElementById("lol").appendChild("lolek");
function dodawaj(){
  var liczba = parseFloat(document.getElementById("pole").value);
  var liczba2 = parseFloat(document.getElementById("pole2").value);
  var suma = liczba + liczba2;
  if ((isNaN(liczba)) && (isNaN(liczba2))) {
    document.getElementById("wynik").innerHTML = "obie liczby nie sa liczbami";
  } else if (isNaN(liczba)) {
    document.getElementById("wynik").innerHTML = "pierwsza liczba nie jest liczba";
  } else if (isNaN(liczba2)) {
    document.getElementById("wynik").innerHTML = "druga liczba nie jest liczba";
  } else if (suma > 0) {
    document.getElementById("wynik").innerHTML = suma + " = liczba dodatnia";
  } else if (suma < 0) {
    document.getElementById("wynik").innerHTML = suma + " = liczba ujemna";
  } else if ((liczba == 0) && (liczba2 == 0)) {
    document.getElementById("wynik").innerHTML = "Podales dwa zera";
  }
}

function odejmowanie(){
  var liczba = parseFloat(document.getElementById("pole3").value);
  var liczba2 = parseFloat(document.getElementById("pole4").value);
  var roznica = liczba - liczba2;
  if ((isNaN(liczba)) && (isNaN(liczba2))) {
    document.getElementById("wynik").innerHTML = "obie liczby nie sa liczbami";
  } else if (isNaN(liczba)) {
    document.getElementById("wynik").innerHTML = "pierwsza liczba nie jest liczba";
  } else if (isNaN(liczba2)) {
    document.getElementById("wynik").innerHTML = "druga liczba nie jest liczba";
  } else if (roznica > 0) {
    document.getElementById("wynik").innerHTML = roznica + " = liczba dodatnia";
  } else if (roznica < 0) {
    document.getElementById("wynik").innerHTML = roznica + " = liczba ujemna";
  } else if ((liczba == 0) && (liczba2 == 0)) {
    document.getElementById("wynik").innerHTML = "Podales dwa zera";
  }
}

function mnozenie(){
  var liczba = parseFloat(document.getElementById("pole5").value);
  var liczba2 = parseFloat(document.getElementById("pole6").value);
  var iloczyn = liczba * liczba2;
  if ((isNaN(liczba)) && (isNaN(liczba2))) {
    document.getElementById("wynik").innerHTML = "obie liczby nie sa liczbami";
  } else if (isNaN(liczba)) {
    document.getElementById("wynik").innerHTML = "pierwsza liczba nie jest liczba";
  } else if (isNaN(liczba2)) {
    document.getElementById("wynik").innerHTML = "druga liczba nie jest liczba";
  } else if (iloczyn > 0) {
    document.getElementById("wynik").innerHTML = iloczyn + " = liczba dodatnia";
  } else if (iloczyn < 0) {
    document.getElementById("wynik").innerHTML = iloczyn + " = liczba ujemna";
  } else if ((liczba == 0) && (liczba2 == 0)) {
    document.getElementById("wynik").innerHTML = "Podales dwa zera";
  } else if ((liczba == 0) || (liczba2 == 0)) {
    document.getElementById("wynik").innerHTML = "Nie mnozymy przez zero";
  }
}


function dzielenie(){
  var liczba = parseFloat(document.getElementById("pole7").value);
  var liczba2 = parseFloat(document.getElementById("pole8").value);
  liczba = Math.floor(liczba * 100) / 100;
  liczba2 = Math.floor(liczba2 * 100) / 100;
  var iloraz = liczba / liczba2;
  if ((isNaN(liczba)) && (isNaN(liczba2))) {
    document.getElementById("wynik").innerHTML = "obie liczby nie sa liczbami";
  } else if (isNaN(liczba)) {
    document.getElementById("wynik").innerHTML = "pierwsza liczba nie jest liczba";
  } else if (isNaN(liczba2)) {
    document.getElementById("wynik").innerHTML = "druga liczba nie jest liczba";
  } else if (iloraz > 0) {
    document.getElementById("wynik").innerHTML = iloraz + " = liczba dodatnia";
  } else if (iloraz < 0) {
    document.getElementById("wynik").innerHTML = iloraz + " = liczba ujemna";
  } else if ((liczba == 0) && (liczba2 == 0)) {
    document.getElementById("wynik").innerHTML = "Podales dwa zera";
  } else if ((liczba == 0) || (liczba2 == 0)) {
    document.getElementById("wynik").innerHTML = "Nie dzielimy przez zero";
  }
}
<!DOCTYPE HTML>
<html lang="pl">

<head>
  <meta charset="utf-8" />
  <title>odliczanie czasu</title>
  <link rel="stylesheet" href="div.css">
</head>

<body>
  <div class="napis">Smiglowy kalkulator</div>
  <input type="text" id="pole" />
  <input type="text" id="pole2" />
  <input type="submit" class="guzik" value="dodaj" onclick="dodawaj()" />
  <br/>
  <br/>
  <input type="text" id="pole3" />
  <input type="text" id="pole4" />
  <input type="submit" class="guzik2" value="odejmij" onclick="odejmowanie()" />
  <br/>
  <div id="lol"></div>
  <br/>
  <input type="text" id="pole5" />
  <input type="text" id="pole6" />
  <input type="submit" class="guzik3" value="pomnoz" onclick="mnozenie()" />
  <br/>
  <br/>
  <input type="text" id="pole7" />
  <input type="text" id="pole8" />
  <input type="submit" class="guzik4" value="podziel" onclick="dzielenie()" />
  <div id="wynik"></div>
</body>

</html>

2 个答案:

答案 0 :(得分：1)

看...尝试第一个... dodaj ...工作... 

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <title>odliczanie czasu</title>
    <link rel="stylesheet" href="div.css">
    <script type="text/javascript">

    function dodawaj()

        {

        var liczba = parseFloat(document.getElementById("pole").value);
        var liczba2 = parseFloat(document.getElementById("pole2").value);
        var suma = liczba+liczba2;

        if((isNaN(liczba)) && (isNaN(liczba2)))
        {
        document.getElementById("wynik").innerHTML = "obie liczby nie sa liczbami";
        }
        else if(isNaN(liczba))
        {
        document.getElementById("wynik").innerHTML = "pierwsza liczba nie jest liczba"; 
        }
        else if(isNaN(liczba2))
        {
        document.getElementById("wynik").innerHTML = "druga liczba nie jest liczba";    
        }
        else if(suma>0)
        {
        document.getElementById("wynik").innerHTML = suma+" = liczba dodatnia"; 

        var img = document.createElement("IMG");
        img.setAttribute("src", "https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg");
        img.setAttribute("width", "304");
        img.setAttribute("height", "228");
        img.setAttribute("alt", "The Pulpit Rock");
        document.body.appendChild(img);


        }
        else if(suma<0)
        {
        document.getElementById("wynik").innerHTML = suma+" = liczba ujemna";   
        }
        else if((liczba==0) && (liczba2==0))
        {
        document.getElementById("wynik").innerHTML = "Podales dwa zera";    
        }
    }

    function odejmowanie()

    {

        var liczba = parseFloat(document.getElementById("pole3").value);
        var liczba2 = parseFloat(document.getElementById("pole4").value);
        var roznica = liczba-liczba2;

        if((isNaN(liczba)) && (isNaN(liczba2)))
        {
        document.getElementById("wynik").innerHTML = "obie liczby nie sa liczbami";
        }
        else if(isNaN(liczba))
        {
        document.getElementById("wynik").innerHTML = "pierwsza liczba nie jest liczba"; 
        }
        else if(isNaN(liczba2))
        {
        document.getElementById("wynik").innerHTML = "druga liczba nie jest liczba";    
        }
        else if(roznica>0)
        {
        document.getElementById("wynik").innerHTML = roznica+" = liczba dodatnia";  
        }
        else if(roznica<0)
        {
        document.getElementById("wynik").innerHTML = roznica+" = liczba ujemna";    
        }
        else if((liczba==0) && (liczba2==0))
        {
        document.getElementById("wynik").innerHTML = "Podales dwa zera";    
        }



    }

    function mnozenie()

        {

        var liczba = parseFloat(document.getElementById("pole5").value);
        var liczba2 = parseFloat(document.getElementById("pole6").value);
        var iloczyn = liczba*liczba2;

        if((isNaN(liczba)) && (isNaN(liczba2)))
        {
        document.getElementById("wynik").innerHTML = "obie liczby nie sa liczbami";
        }
        else if(isNaN(liczba))
        {
        document.getElementById("wynik").innerHTML = "pierwsza liczba nie jest liczba"; 
        }
        else if(isNaN(liczba2))
        {
        document.getElementById("wynik").innerHTML = "druga liczba nie jest liczba";    
        }
        else if(iloczyn>0)
        {
        document.getElementById("wynik").innerHTML = iloczyn+" = liczba dodatnia";  
        }
        else if(iloczyn<0)
        {
        document.getElementById("wynik").innerHTML = iloczyn+" = liczba ujemna";    
        }
        else if((liczba==0) && (liczba2==0))
        {
        document.getElementById("wynik").innerHTML = "Podales dwa zera";    
        }
        else if((liczba==0) || (liczba2==0))
        {
        document.getElementById("wynik").innerHTML = "Nie mnozymy przez zero";  
        }
    }



    function dzielenie()

        {

        var liczba = parseFloat(document.getElementById("pole7").value);
        var liczba2 = parseFloat(document.getElementById("pole8").value);
        liczba = Math.floor(liczba*100) / 100;
        liczba2 = Math.floor(liczba2*100) / 100;
        var iloraz = liczba/liczba2;


        if((isNaN(liczba)) && (isNaN(liczba2)))
        {
        document.getElementById("wynik").innerHTML = "obie liczby nie sa liczbami";
        }
        else if(isNaN(liczba))
        {
        document.getElementById("wynik").innerHTML = "pierwsza liczba nie jest liczba"; 
        }
        else if(isNaN(liczba2))
        {
        document.getElementById("wynik").innerHTML = "druga liczba nie jest liczba";    
        }
        else if(iloraz>0)
        {
        document.getElementById("wynik").innerHTML = iloraz+" = liczba dodatnia";   
        }
        else if(iloraz<0)
        {
        document.getElementById("wynik").innerHTML = iloraz+" = liczba ujemna"; 
        }
        else if((liczba==0) && (liczba2==0))
        {
        document.getElementById("wynik").innerHTML = "Podales dwa zera";    
        }
        else if((liczba==0) || (liczba2==0))
        {
        document.getElementById("wynik").innerHTML = "Nie dzielimy przez zero"; 
        }
    }



    </script>
</head>
<body>
<div class="napis">Smiglowy kalkulator</div>
<input type="text" id="pole"/>
<input type="text" id="pole2"/>
<input type="submit" class="guzik" value="dodaj" onclick="dodawaj()"/>
<br/>
<br/>
<input type="text" id="pole3"/>
<input type="text" id="pole4"/>
<input type="submit" class="guzik2" value="odejmij" onclick="odejmowanie()"/>
<br/>
<div id="lol"></div>
<br/>
<input type="text" id="pole5"/>
<input type="text" id="pole6"/>
<input type="submit" class="guzik3" value="pomnoz" onclick="mnozenie()"/>
<br/>
<br/>
<input type="text" id="pole7"/>
<input type="text" id="pole8"/>
<input type="submit" class="guzik4" value="podziel" onclick="dzielenie()"/>
<div id="wynik"></div>
</body>
</html>

答案 1 :(得分：1)

一种方法是将图像与可见div一起放入容器div中，但使用display: none设置图像样式。然后，当满足条件时，可以交换style.display属性以显示图像而不是div，例如：

     document.getElementById("myInput").addEventListener("change", waitForNine);

      function waitForNine(event){ 
        if(event.target.value == 9){
          document.getElementById("stuffUsersSee").style.display = "none";
          document.getElementById("myImg").style.display = "block";
        }
      }
    #myInput{width: 5ch; }
    #container{ 
      width: 100px;
      height: 75px;
      margin: 10px;
      border: 1px solid gray; }

    #myImg{
      display: none;
    }
    3+3=<input id="myInput" />
    <div id="container">
      <div id="stuffUsersSee">Stuff</div>
      <img id="myImg" src="/myImage.png" />
    </div>

或者，如果要保持HTML的整洁，可以在JS中创建myImg元素，然后使用document.getElementById("container").innerHTML = myImg;覆盖以前的内容。

相关问题
最新问题