How can i add a picture instead of text in an if or else statement

Question

Hi I have created a HTML and JavaScript website with a conditional statement where it replies something back if you say hi.

function myFunction() {
    var letter = document.getElementById("myInput").value.toLowerCase(),
        text;

    if (letter === "hi im jack") {
        text = "Spot on! Good job!";
    } else if (letter === "hi" || letter === "hey" || letter === "hello" || letter === "hi there") {
        text = "Hi I Am Mike";
    }
    document.getElementById("demo").innerHTML = text;
}

<input id="myInput" type="text" onkeyup="myFunction()" style="font-size: 30pt; height: 50px; width: 600px;">
<button onclick="myFunction()" style="font-size: 30pt; height: 50px; width: 200px;">ENTER</button>
<p id="demo">result here</p>

The problem is I need to add an image instead of text for one of the replies. I also need to know how to make it send you to a different website automatically. I'm looking for something really simple that can replace the "text ==" if possible.

You need to use the img element in the innerHTML statement i.e. document.getElementById("demo").innerHTML=" — , Jan 08 '16 at 01:55

score 1 · Answer 1 · edited May 23 '17 at 10:28

1

Please see this answer, it might help: How to display image with javascript?

Place the following instead of the text line and it should work.

  text = ('< img src="+http:xxx+"/>');

edited May 23 '17 at 10:28

Community

1
1

answered Jan 08 '16 at 01:56

Maihan Nijat

9,054
11
62
110

Wessam El Mahdy · Accepted Answer · 2016-01-09T00:08:02.343

1

Use the same code as you used and assign new values to the text variable as follows:

function myFunction() {
var letter = document.getElementById("myInput").value.toLowerCase(),
    text;

if (letter === "hi im jack") {
    text = '<img src="imageName.jpg" width="200" height="200" />'; //Show an image
} else if (letter === "hi" || letter === "hey" || letter === "hello" || letter === "hi there") {
    location.href = 'http://www.websitename.com'; //Redirect automatically
}
document.getElementById("demo").innerHTML = text;

}

edited Jan 09 '16 at 00:08

answered Jan 08 '16 at 03:10

Wessam El Mahdy

457
5
14

thanks @Wessam El Mahdy. how would I make that a none automatic link. thanks. – Jack Jan 08 '16 at 06:09
@LeeTaylor Sorry, there is a typo you should use location.href ='http://www.websitename.com'; location.href should change the current webpage location to another location, I have updated the code. – Wessam El Mahdy Jan 09 '16 at 00:09
@JackBeeby Welcome, Could you please explain what do you mean by a none automatic link, What's the exact scenario you want to do? – Wessam El Mahdy Jan 09 '16 at 00:15
a link that you have to click to take you to your site. like a button not one that automatically takes you. – Jack Jan 09 '16 at 00:19
@JackBeeby assign a hyperlink tag to the "text" variable i.e. text = 'Click here to continue'; – Wessam El Mahdy Jan 09 '16 at 00:22
so @LeeTaylor So you can basicly put any action like that into the text variable. – Jack Jan 09 '16 at 00:25
@JackBeeby Yes, and you can assign it directly (without variables) to document.getElementById("demo").innerHTML – Wessam El Mahdy Jan 09 '16 at 00:28

synthet1c · Answer 3 · 2016-01-08T02:30:41.830

You could use a switch statement instead of the if A switch statement is kind of like an if else conditional with some syntactic sugar eg

switch( chackVariable ){
  case value:
    doSomeStuff()
  break; // break will end the switch statement and prevent testing any other cases
}

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/switch

then the other part of the question was relating to creating an image, I would just use innerHTML to create it as a string as has been said here before.

function myFunction() {
  // try to save your helper variables at the top of the function
  var 
    input  = document.getElementById("myInput"),
    demo   = document.getElementById("demo"),
    letter = input.value.toLowerCase(),
    text;
  
  switch( letter ){
    case 'hi im jack':
      text = 'Spot on! Good Job!';
      break;
    // you can do && conditions by doing multiple cases for one set of functionality
    case 'hi':
    case 'hello':
    case 'hi there':
      text = 'Hi I Am Mike';
      break;
    case 'image':
      text = '<img src="http://lorempixel.com/100/100/" />';
      break;
    case 'personal space':
      // you can redirect the page with js by setting the value for document.location.href
      // it wont work on stack however due to the same origin policy and settings on the other web page
      document.location.href = 'https://www.youtube.com/embed/2DfmDuOxcN8';
      break;
    // default will be run if none of the cases match or the previous cases did not have a break
    default:
      text = 'result here';
  }
  
  demo.innerHTML = text;
}

<input id="myInput" type="text" onkeyup="myFunction()" style="font-size:30pt;height:50px;width:600px;">

<button onclick="myFunction()" style="font-size:30pt;height:50px;width:200px;">ENTER</button>

<p id="demo">result here</p>

How can i add a picture instead of text in an if or else statement

3 Answers3