javascript - Showing images on a page with document.write() - Stack Overflow

admin管理员组

文章数量:1313011

I'm trying to post an image when in my javascript file with document.write(). The problem is that when I try it, the image always es up broken. Here is the code. Am I writing the tag wrong? I've tested the images on non-javascript pages and they seem to show up fine.

var replay = "yes";
var userChoice = prompt("Do you choose rock, paper or scissors?");
userChoice = userChoice.toLowerCase();
var puterChoice = Math.random();
if (puterChoice < 0.34) {
    puterChoice = "rock";
} else if (puterChoice <= 0.67) {
    puterChoice = "paper";
} else {
    puterChoice = "scissors";
}
var pare = 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.");
        }
    }
};
pare(userChoice, puterChoice);

I'm trying to post an image when in my javascript file with document.write(). The problem is that when I try it, the image always es up broken. Here is the code. Am I writing the tag wrong? I've tested the images on non-javascript pages and they seem to show up fine.

var replay = "yes";
var userChoice = prompt("Do you choose rock, paper or scissors?");
userChoice = userChoice.toLowerCase();
var puterChoice = Math.random();
if (puterChoice < 0.34) {
    puterChoice = "rock";
} else if (puterChoice <= 0.67) {
    puterChoice = "paper";
} else {
    puterChoice = "scissors";
}
var pare = 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.");
        }
    }
};
pare(userChoice, puterChoice);

• javascript
• html
• image

Share Improve this question Follow edited Dec 16, 2013 at 23:23 user1636522 asked Dec 16, 2013 at 23:19 user3068063user3068063 1911 gold badge11 silver badge55 bronze badges 3

• What would a full URL to some of your images be? example./??? <- what should the ??? be? – Endophage Commented Dec 16, 2013 at 23:22
• The image is in a folder on my flash drive. My html file is one level above it. So an example would be images\rock.jpg – user3068063 Commented Dec 16, 2013 at 23:25
• document.write("<img src='images/rock.jpg' />"); – way2vin Commented Dec 16, 2013 at 23:27

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You almost got it, I think you just have to replace backslashes with slashes: '<img src="images/orna.jpg">'. Here is a demo (click "run" until win):

var replay = "yes";
var userChoice = prompt("Do you choose rock, paper or scissors?");
userChoice = userChoice.toLowerCase();
var puterChoice = Math.random();
if (puterChoice < 0.34) {
  puterChoice = "rock";
} else if (puterChoice <= 0.67) {
  puterChoice = "paper";
} else {
  puterChoice = "scissors";
}
var pare = 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.sstatic/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.");
    }
  }
};
pare(userChoice, puterChoice);

Don't use document.write(). It is harmful. Instead, what you need to do is create a <div></div> and append stuff to that.

Anyway, the reason your things aren't working you have unescaped \s. For example, if you have <img src="images\orna.jpg\">, the \s are acting as escape characters, and are ignored. Your string '' evaluates to '<img src="imagesorna.jpg">', which is definitely not what you want. Make sure the file paths are correct, and if they are, you need to change them to

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

At any rate, create a div, and then using jQuery or pure Javascript, append elements to them. You can do that by accessing its innerHTML, or by using the .append() jQuery method

I agree with scrblndr3 that document.write is bad. Do some reading on it.

To help you understand what's wrong, here's a bit of explanation.

First, "\" is a Windows specific file path segment delimiter. Browsers and anything unix based use "/" to delimit segments of a path. Secondly, in your path string, you escape the final double quote, as your string is wrapped with single quotes, this is unnecessary and breaking. The correct mand would be:

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

or if your string was double quoted, you would have to escape the internal double quotes like:

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

本文标签： javascriptShowing images on a page with documentwrite()Stack Overflow