如何在JS中用圖像替換div內容
[英]How to replace div content with image in JS
問題描述
我在 JS 中創建了簡單的計算器，我想添加一個選項，如果出現特定分數，特定圖像將彈出。 例如，3+3 = 9 並且除了數字 photo 也會出現。 我有一個想法如何去做，但我不知道如何用 js 圖像替換 html div。 感謝任何幫助。 “if”部分中的波蘭語描述只是描述，所以請忽略它。
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 個解決方案
解決方案1
1 2019-02-22 15:05:26
看...嘗試第一個... 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>
解決方案2
1 2019-02-22 15:11:43
一種方法是將圖像與可見 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; 覆蓋之前的內容。
如何使用 AJAX 將 div 內容替換為另一個頁面的 div 內容？
[英]How to replace div content with div content of another page using AJAX?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.