CODEWITHSUNDEEP
javascripthtml
bean
bean

Reputation: 337

How to display an image from input text in HTML JavaScript?

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>

Upvotes: 1

Views: 2173

Answers (3)

shender
shender

Reputation: 1283

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 ifs) 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 Statementhttps://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.

Upvotes: 0

Sascha A.
Sascha A.

Reputation: 4626

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>

Upvotes: 2

Unmitigated
Unmitigated

Reputation: 89394

You should use a <img> element to display images.

<img id="imgResult"/>

var image = document.getElementById("imgResult");
image.src = imageFile;

Upvotes: 0

Related Questions