CODEWITHSUNDEEP
javascripthtml
mrs68tm
mrs68tm

Reputation: 77

How to add images or another text in Javascript?

I have the below code and I want to replace the "Good....." text wih images and/or with some text, tables using HTML. I tried with innerHTML, no success. I guess I need some new variables.

var greeting;
function myFunction() {
    var time = new Date().getHours();
    if (time < 10) {
        greeting = "Good morning";
    } 
    else if (time < 18) {
        greeting = "Good day";
    }
    else if (time < 22) {
        greeting = "Good evening";
    } 
    else {
        greeting = "Good night";
    }
}

myFunction();
var createP = document.createElement('p');
document.getElementById('demo').appendChild(createP);
createP.innerHTML = greeting;
console.log(createP);

Upvotes: 0

Views: 81

Answers (2)

mrs68tm
mrs68tm

Reputation: 77

For the multi line text I solved it with the below code (Only a part of it). I have just a simple break rule. I am looking for a option to add images.

 greeting = "Nice to meet you! Are you OK? <br> I hope so!";

To add an image I did as below.

 greeting = "Nice to meet you! <br> See ya later <br> and so on";
 greeting+= '<img class="img-fluid" src="src="https://upload.wikimedia.org/wikipedia/en/9/95/Test_image.jpg">';

Upvotes: 0

Dipak
Dipak

Reputation: 2308

I have created all 3 demos with different pieces of code. 

var greeting;

function myFunction(replaceText) {
  var time = new Date().getHours();
  if (time < 10) {
    greeting = "Good morning";
  } else if (time < 18) {
    greeting = "Good day";
  } else if (time < 22) {
    greeting = "Good evening";
  } else {
    greeting = "Good night";
  }
  greeting = greeting.replace(/good/gi, replaceText);
}

myFunction("test");
var createP = document.createElement('p');
document.getElementById('demo').appendChild(createP);
createP.innerHTML = greeting;
<div id="demo"></div>

another way 

 var greeting;

 function myFunction(replaceText) {
   var time = new Date().getHours();
   if (time < 10) {
     greeting = "Good morning";
   } else if (time < 18) {
     greeting = "Good day";
   } else if (time < 22) {
     greeting = "Good evening";
   } else {
     greeting = "Good night";
   }
   greeting = greeting.replace(/good/gi, replaceText);
 }

 myFunction("test");
 var createP = document.createElement('p');
 document.getElementById('demo').appendChild(createP);
 createP.innerHTML = greeting;
<div id="demo"></div>

var greeting;

function myFunction() {
  var time = new Date().getHours();
  if (time < 10) {
    greeting = "Good morning";
  } else if (time < 18) {
    greeting = "Good day";
  } else if (time < 22) {
    greeting = "Good evening";
  } else {
    greeting = "Good night";
  }

}

myFunction();
greeting = greeting.replace(/good/gi, '<img src="https://upload.wikimedia.org/wikipedia/en/9/95/Test_image.jpg"/>');
var createP = document.createElement('p');
document.getElementById('demo').appendChild(createP);
createP.innerHTML = greeting;
<div id="demo"></div>

replace image

Upvotes: 2

Related Questions