2 scripts on page but only one runs

JavaScript
1

I have this page i created that does 2 things. First it displays an image based on the time. This works. Then i added a second script that allows a user to change the color of text. When each script is run separately (different pages) no issue.
if i combine them only the image one runs. Any ideas would be appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body onload="imagetime()">
<br />

<div align="center">
<div align="center" id="colorMsg" style="font-size:25px;width:100px;height:100px;padding:5px;">
<br>
<br>
Welcome:
<script>
function changeColor(){
  var newColor = document.getElementById('colorPicker').value;
	document.getElementById('colorMsg').style.color = newColor;
}
</script>

<select id="colorPicker" onChange="JavaScript:changeColor()">
<option value="purple">None</option>
<option value="red">Red</option>
<option value="orange">Orange</option>
<option value="maroon">Maroon</option>
<option value="blue">Blue</option>
</select>
</div>
</div>
<br />

<div>
<script>
function imagetime() {
// man means morning, afternoon or night
var current= new Date()
var man=current.getHours()
if (man<=8) {
    document.write('<center><img src="1.jpg"></center>'); //display the morning image
}
	
else if (man<16) {
    document.write('<center><img src="2.jpg"></center>'); //display the afternoon image
}
else {
	document.write('<center><img src="3.jpg"></center>');//display the evening image
}
}
</script>
</div>
<p id="imagedest"></p>
<br/>
<br />

</body>
</html>
2

Hi @kenny86daniel, actually the scripts both run, but the problem is that document.write() will clear the entire document if you call that method after the document got loaded. If you just want to append the image to the body, use .insertAdjacentHTML():

document.body.insertAdjacentHTML('beforeend', '<img src="1.jpg">')

(Note that the <center> tag is deprecated; use CSS to center the image instead.)

If you want to insert the image to the #imagedest element instead of the body, you can do that likewise… although I think it would be a bit cleaner to create the image element programmatically rather than generating markup with JS.

BTW you don’t need the onload listener if you just put the JS at the very end of the body; this way it will only run when your actual markup has been loaded anyway. You can then wrap the code in an IIFE to not pollute the global scope like so:

;(function imagetime () {
  var imagedest = document.getElementById('imagedest')
  var image = document.createElement('img')
  var current = new Date()
  var man = current.getHours()

  if (man <= 8) {
    image.src = '1.jpg'
  } else if (man < 16) {
    image.src = '2.jpg'
  } else {
    image.src = '3.jpg'
  }

  imagedest.appendChild(image)
})()
2 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.