使用document.write(）在页面上显示图像

Showing images on a page with document.write()

本文关键字：显示 显示图 图像 document write 使用      更新时间：2023-09-26

我试图在使用document.write（）的javascript文件中发布图像。问题是，当我尝试时，图像总是会被破坏。这是代码。我写错标签了吗？我在非javascript页面上测试了这些图像，它们似乎显示得很好。

var replay = "yes";
var userChoice = prompt("Do you choose rock, paper or scissors?");
userChoice = userChoice.toLowerCase();
var computerChoice = Math.random();
if (computerChoice < 0.34) {
    computerChoice = "rock";
} else if (computerChoice <= 0.67) {
    computerChoice = "paper";
} else {
    computerChoice = "scissors";
}
var compare = function (choice1, choice2) {
    if (choice1 === choice2) {
        document.write("The result is a tie!");
    }
    if (choice1 === "rock") {
        if (choice2 === "scissors") {
            document.write('<img src="images'orna.jpg'">');
        } else {
            document.write("Computer chose paper. Computer wins.");
        }
    }
    if (choice1 === "paper") {
        if (choice2 === "scissors") {
            document.write("Computer chose scissors. Computer wins.");
        } else {
            document.write("Computer chose rock. Player wins.");
        }
    }
    if (choice1 === "scissors") {
        if (choice2 === "paper") {
            document.write("Computer chose paper. Player wins.");
        } else {
            document.write("Computer chose scissors. Computer wins.");
        }
    }
};
compare(userChoice, computerChoice);

你几乎做到了，我认为你只需要用斜杠替换反斜杠：'<img src="images/orna.jpg">'。这里有一个演示（点击"运行"直到获胜）：

var replay = "yes";
var userChoice = prompt("Do you choose rock, paper or scissors?");
userChoice = userChoice.toLowerCase();
var computerChoice = Math.random();
if (computerChoice < 0.34) {
  computerChoice = "rock";
} else if (computerChoice <= 0.67) {
  computerChoice = "paper";
} else {
  computerChoice = "scissors";
}
var compare = function(choice1, choice2) {
  if (choice1 === choice2) {
    document.write("The result is a tie!");
  }
  if (choice1 === "rock") {
    if (choice2 === "scissors") {
      document.write('<img src="https://i.stack.imgur.com/gLr3o.jpg?s=128&g=1">');
    } else {
      document.write("Computer chose paper. Computer wins.");
    }
  }
  if (choice1 === "paper") {
    if (choice2 === "scissors") {
      document.write("Computer chose scissors. Computer wins.");
    } else {
      document.write("Computer chose rock. Player wins.");
    }
  }
  if (choice1 === "scissors") {
    if (choice2 === "paper") {
      document.write("Computer chose paper. Player wins.");
    } else {
      document.write("Computer chose scissors. Computer wins.");
    }
  }
};
compare(userChoice, computerChoice);

不要使用document.write()。它是有害的。相反，您需要做的是创建一个<div></div>并向其添加内容。

无论如何，你的东西不起作用的原因是你有未转义的's。例如，如果你有<img src="images'orna.jpg'">，则's充当转义符，并被忽略。字符串"的计算结果为'<img src="imagesorna.jpg">'，这绝对不是您想要的。确保文件路径正确，如果正确，您需要将其更改为

'<img src="images''orna.jpg''">'

无论如何，创建一个div，然后使用jQuery或纯Javascript将元素附加到它们。您可以通过访问其innerHTML或使用.append()jQuery方法

来完成此操作

我同意scrblndr3关于document.write不好的观点。读一读。

为了帮助你理解问题所在，这里有一些解释。

首先，"''"是Windows特定的文件路径段分隔符。浏览器和任何基于unix的东西都使用"/"来分隔路径的段。其次，在您的路径字符串中，您可以转义最后的双引号，因为您的字符串被单引号包裹，这是不必要的，而且是破坏性的。正确的命令是：

document.write('<img src="images/orna.jpg">');

或者，如果你的字符串是双引号，你就必须转义内部双引号，比如：

document.write("<img src='"images/orna.jpg'">");
相关文章：