I'm making an image viewer in HTML5 and I want to write a script tag to the body or head but it won't work. Here is an extract from the main script:
function play() {
document.getElementsByClassName("play")[0].setAttribute("class", "play active");
document.getElementsByClassName("pause")[0].setAttribute("class", "pause");
var body = document.body.innerHTML;
body.innerHTML=body + "<script id='playpause' src='res/playpause.js'></script>";
}
Here is the script I'm trying to write:
var slideshow = setInterval("forward();",5000);
function pause() {
document.getElementsByClassName("play")[0].setAttribute("class", "play");
document.getElementsByClassName("pause")[0].setAttribute("class", "pause active");
window.clearInterval(slideshow);
var playpause = document.getElementById("playpause");
playpause.parentNode.removeChild(playpause);
}
And here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Image viewer</title>
<link rel="stylesheet" href="res/style.css" />
<script src="res/script.js"></script>
</head>
<body onload="play()">
<div class="img">
<img title="Hover over me to un-darken" alt="Error displaying image" src="images/1.jpg" id="img" data-number="1" />
</div>
<div title="Backward" class="backward" onclick="backward()"></div>
<div title="Forward" class="forward" onclick="forward()"></div>
<div title="Play" class="play active" onclick="play()"></div>
<div title="Pause" class="pause" onclick="pause()"></div>
<div title="Go to beginning" class="stop" onclick="stop()"></div>
</body>
</html>
Any ideas?
Maybe something like this:
var s = document.createElement('script');
s.setAttribute("type", "text/javascript");
s.setAttribute("src", "res/playpause.js");
var head = document.getElementsByTagName('head')[0];
head.appendChild(s);
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.