Question

以下代码会自动删除所有标题和段落，并加载相关图片。我想要添加图像，而不是替换文本。为什么会这样？

<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p>My paragraph.</p>
<p id="flipDisplay"></p>
<button onclick="display()">Flip the Coin!</button>
<script>
  function coinFlip() {
    return (Math.floor(Math.random() * 2) == 0);
  }
  function display() {
    if (coinFlip()) {
      document.write('<img src="./tflip.png">');
    } else {
      document.write('<img src="./ctflip.png">');
    }
  }
</script>
<!--<a><img src=javacript:flip></a> -->
</body>
</html>

Answer 1

我们可以将图像附加到屏幕上的元素，而不是使用document.write。我使用id="flipDisplay"段落标记来保存图片。

我正在创建一个img元素，然后使用新的showImage函数清除flipDisplay的旧内容并附加新结果。

<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p>My paragraph.</p>
<p id="flipDisplay"></p>
<button onclick="display()">Flip the Coin!</button>
<script>
  function coinFlip() {
    return (Math.floor(Math.random() * 2) == 0);
  }
  function display() {
    if (coinFlip()) {      
      var img = document.createElement('img');
      img.src = "./tFlip.png";    
      showImage(img);         
    } else {      
      var img = document.createElement('img');
      img.src = "./ctflip.png";
      showImage(img);
    }
  }

  function showImage(img){
      var display = document.getElementById("flipDisplay");
      display.innerHTML = '';
      display.appendChild(img);
  }
</script>
<!--<a><img src=javacript:flip></a> -->
</body>
</html>

我正在避免document.write，因为在页面加载后使用时，它将清除DOM并仅插入提供给写入的内容。交互式页面在修改页面时倾向于使用其他方法，例如上面的示例。

用图像替换页面而不是添加它

1 个答案: