How to display an image from input text in HTML JavaScript?
Question
I need to display a picture of a duck on my webpage when the user types in "show duck image" in the text field and clicks a button "Execute command".
The text field has numerous commands, hence the 'else if' statements. Here is what I have so far, when I trial the duck command, no image is displayed. Any help would be greatly appreciated!
function theCommand(imageFile) { var commandInput = document.getElementById("commandInput"); var command = commandInput.value; var image = document.getElementById("imgResult"); image.src = imageFile; if (command == "make duck noise") { command = "QUACK QUACK"; } else if (command == "make rooster noise") { command = "COCK-A-DOODLE-DOO"; } else if (command == "show duck image") { command == imageFile; } else if (command != "make duck noise" || command != "make rooster noise") { command = "Invalid command"; } var commandSpan = document.getElementById("result"); commandSpan.innerHTML = command; }
<html> <body> Enter command: <input type="text" id="commandInput" /> <button onClick="theCommand('duck.png')">Execute command</button> <br /> <br /> <span id="result"></span> <img id="imgResult"/> </body> </html>
3 answers
solution1
1 ACCPTED 2020-09-11 17:43:33
Add an IMG-element to your command helps.
function theCommand(imageFile) { var commandInput = document.getElementById("commandInput"); var command = commandInput.value; var image = document.getElementById("result"); image.src = imageFile; if (command == "make duck noise") { command = "QUACK QUACK"; } else if (command == "make rooster noise") { command = "COCK-A-DOODLE-DOO"; } else if (command == "show duck image") { command = "<img src='https://www.checkeins.de/sendungen/die-sendung-mit-der-maus/die-sendung-mit-dermaus-ente-100~_v-standard644_5fdf7b.jpg'></img>"; } else if (command != "make duck noise" || command != "make rooster noise") { command = "Invalid command"; } var commandSpan = document.getElementById("result"); commandSpan.innerHTML = command; }
<html> <body> Enter command: <input type="text" id="commandInput" /> <button onClick="theCommand('duck.png')">Execute command</button> <br /> <br /> <span id="result"></span> </body> </html>
solution2
0 2020-09-11 17:39:33
You should use a <img> element to display images.
<img id="imgResult"/>
var image = document.getElementById("imgResult");
image.src = imageFile;
solution3
0 2020-09-11 18:36:57
You need to use an HTML <img> tag as the HTML that you put inside the result. The other command values are plain text, which works as .innerHTML . To show an image properly, we need a full <img src="duck.png"> string.
For demonstration, I changed the HTML snippet to reference a public duck image.
function theCommand(imageFile) { var commandInput = document.getElementById("commandInput"); // By default, set the result value to the form input's value (a string of text) var command = commandInput.value; if (command == "make duck noise") { command = "QUACK QUACK"; } else if (command == "make rooster noise") { command = "COCK-A-DOODLE-DOO"; } else if (command == "show duck image") { // For the image case, set result to be an HTML <img> element with src value passed in command = '<img src="' + imageFile + '">'; } else if (command != "make duck noise" || command != "make rooster noise") { command = "Invalid command"; } var commandSpan = document.getElementById("result"); // When command is "show duck image", `command` var will have a functional <img> tag in it // instead of plain text commandSpan.innerHTML = command; }
<html> <body> Enter command: <input type="text" id="commandInput" /> <button onClick="theCommand('https://images.unsplash.com/photo-1459682687441-7761439a709d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80')">Execute command</button> <br /> <br /> <span id="result"></span> </body> </html> The logic for the conditional statement seems like it might not work as intended. The check for else if (command != "make duck noise" || command != "make rooster noise") { is redundant becuase those strings were already checked higher up in the conditional. It can be refactored to simply use else as a catch all:
if (command == "make duck noise") {
command = "QUACK QUACK";
} else if (command == "make rooster noise") {
command = "COCK-A-DOODLE-DOO";
} else if (command == "show duck image") {
// For the image case, set result to be an HTML <img> element with src value passed in
command = '<img src="' + imageFile + '">';
} else {
command = "Invalid command";
}
When conditional logic ends up needing a lot of specific cases ( else if s) like this, doing some refactoring can make the code much easier to work with. I highly recommend checking out 5 Tips to Write Better Conditionals in JavaScript ― Scotch.io . The section "Favor Map / Object Literal than Switch Statement https://scotch.io/bar-talk/5-tips-to-write-better-conditionals-in-javascript#toc-4-favor-map-object-literal-than-switch-statement" is particularly useful for your example:
function theCommand(imageFile) { var commandInput = document.getElementById("commandInput"); // By default, set the result value to the form input's value (a string of text) var command = commandInput.value; var commandMap = { 'make duck noise': "QUACK QUACK", 'make rooster noise': "COCK-A-DOODLE-DOO", 'show duck image': '<img src="' + imageFile + '">', } var commandSpan = document.getElementById("result"); // Set inner HTML of result element to the value returned by the command map // or use a default string if the command given is not in the map commandSpan.innerHTML = commandMap[command] || 'Invalid command'; }
<html> <body> Enter command: <input type="text" id="commandInput" /> <button onClick="theCommand('https://images.unsplash.com/photo-1459682687441-7761439a709d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80')">Execute command</button> <br /> <br /> <span id="result"></span> </body> </html> The code above also has an added benefit of not mutating the original command variable, so the original user input value is never lost during program execution.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.