With my code, I made an array for JavaScript to randomly choose an image and display it. But its not showing. Please help.
This is my code currently:
HTML & JS
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://images-na.ssl-images-amazon.com/images/I/41I+vcnXn-L._AC_UL600_SR600,600_.png" />
<title>Noice Game</title>
</head>
<body>
<img id="img1" src="" alt="" />
<button class="foodbtn" onclick="GetImage();" id="imagebtn">
Begin!
</button>
<body>
<html>
<script>
function GetImage()
{
var imagearray= new Array("https://cdn.madeinturkeytours.com/wp-content/uploads/2020/02/vegan-cig-kofte.jpg","https://deih43ym53wif.cloudfront.net/large_spanakopita-greek-food_dd3bda740c.jpeg","https://static.toiimg.com/thumb/53099699.cms?width=1200&height=900","https://www.travelbuddies.info/wp-content/uploads/2020/02/tsuivan.jpg");
var randomimagesrc = imagearray[Math.floor(Math.random() * imagearray.length)];
}
$("#img1").attr("src", imagearray[randomimagesrc]);
</script>
<style>
#img1 {
size: 400px;
z-index: 1000;
}
</style>
You need to move $("#img1").attr(...) inside the GetImage() function. Also, since you are accessing a random element in randomimagesrc, there is no need to do imagearray[randomimagesrc] while setting the src.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://images-na.ssl-images-amazon.com/images/I/41I+vcnXn-L._AC_UL600_SR600,600_.png" />
<title>Noice Game</title>
</head>
<body>
<img id="img1" src="" alt="" />
<button class="foodbtn" onclick="GetImage()" id="imagebtn">
Begin!
</button>
<body>
<html>
<script>
function GetImage() {
var imagearray = new Array("https://cdn.madeinturkeytours.com/wp-content/uploads/2020/02/vegan-cig-kofte.jpg", "https://deih43ym53wif.cloudfront.net/large_spanakopita-greek-food_dd3bda740c.jpeg", "https://static.toiimg.com/thumb/53099699.cms?width=1200&height=900", "https://www.travelbuddies.info/wp-content/uploads/2020/02/tsuivan.jpg");
var randomimagesrc = imagearray[Math.floor(Math.random() * imagearray.length)];
$("#img1").attr("src", randomimagesrc);
}
</script>
<style>
#img1 {
size: 400px;
z-index: 1000;
}
</style>
You have provided change src sript outside the GetImage() function and when you already have created new variable which is random, then you can use it directly in randomimagesrc
function GetImage()
{
var imagearray= new Array(
"https://cdn.madeinturkeytours.com/wp-content/uploads/2020/02/vegan-cig-kofte.jpg",
"https://deih43ym53wif.cloudfront.net/large_spanakopita-greek-food_dd3bda740c.jpeg",
"https://static.toiimg.com/thumb/53099699.cms?width=1200&height=900",
"https://www.travelbuddies.info/wp-content/uploads/2020/02/tsuivan.jpg"
);
var randomimagesrc = imagearray[Math.floor(Math.random() * imagearray.length)];
$("#img1").attr("src", randomimagesrc);
}
#img1 {
size: 400px;
z-index: 1000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img1" src="" alt="" />
<button class="foodbtn" onclick="GetImage();" id="imagebtn">
Begin!
</button>
The problems you had:
You had html lang="en">. You forgot to add an extra < before that code.
Secondly, I think it would be better if the script and style tag were inside the html tag.
I recommend using HTML DOM over jQuery.
Also put the HTML dom inside the function.
Now you're done!
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://images-na.ssl-images-amazon.com/images/I/41I+vcnXn-L._AC_UL600_SR600,600_.png" />
<title>Noice Game</title>
</head>
<body>
<img id="img1" src="" alt="" /> <br>
<button class="foodbtn" onclick="GetImage();" id="imagebtn">
Begin!
</button>
<body>
<script>
function GetImage()
{
var imagearray= new Array("https://cdn.madeinturkeytours.com/wp-content/uploads/2020/02/vegan-cig-kofte.jpg","https://deih43ym53wif.cloudfront.net/large_spanakopita-greek-food_dd3bda740c.jpeg","https://static.toiimg.com/thumb/53099699.cms?width=1200&height=900","https://www.travelbuddies.info/wp-content/uploads/2020/02/tsuivan.jpg");
var randomimagesrc = imagearray[Math.floor(Math.random() * imagearray.length)];
document.getElementById('img1').src = randomimagesrc;
}
$("#img1").attr("src", imagearray[randomimagesrc]);
</script>
<style>
#img1 {
size: 400px;
z-index: 1000;
}
</style>
<html>
Here's your new code.
Edit: Forgot to add that you can make the picture fixed size, so you don't need to chase the button.
<style>
img#img1 {
width: 100px;
height: 100px;
}
</style>
Related
I got this image url
https://images.lvrcdn.com/MediumRetina75I/DL1/101_266d32b0-4f23-4cca-b1c2-a8b7bb27dbb0.JPG
I need to enable preview to use it in discord embeds for example, but site hasn't enabled the link preview.
Cause image urls are different from the same website I made a html page with javascript code to display image and preview's metadata taking image url from url parameter eg: my website.html?url=imageurl/name.png.
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
<!-- open graph -->
<!-- Informations -->
<meta property="og:description" content="OPEN_GRAPH_DESCRIPTION" />
<meta property="og:title" content="OPEN_GRAPH_TITLE" />
<meta property="og:type" content="website" />
<meta property="og:url" content="WEBSITE_URL" />
<!-- Image -->
<meta id="meta1" property="og:image" content />
<meta property="og:image:alt" content="Website icon" />
<meta property="og:image:height" content="80" />
<meta id="meta2" property="og:image:secure_url" content/>
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="80" />
<meta property="og:locale" content="en_GB" />
<!-- ... --->
<script type="text/javascript">
function getParameter(paramName) {
var searchString = window.location.search.substring(1), i, val, params = searchString.split("&");
for ( i = 0; i < params.length; i++) {
val = params[i].split("=");
if (val[0] == paramName) {
return val[1];
}
}
return null;
}
function getUrlData() {
var param = getParameter("ref");
document.getElementsByName("img-area")[0].src = param;
document.getElementById("meta1").setAttribute("content", param);
document.getElementById("meta2").setAttribute("content", param);
}
var ctx = c.getContext("2d");
var img = document.getElementById("preview");
ctx.drawImage(img, 10, 10);
</script>
<title>Preview</title>
</head>
<body style="margin: 0px; background: #0e0e0e; height: 100%" onload="getUrlData()">
<img id = "preview" name="img-area" src style="display: block; margin: auto; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);" alt="prev">
<canvas id="myCanvas" />
<!-- ... --->
</body>
</html>
If I go to my website link with the image url in parameter it is working well, it displays the image and correct metadata.
But it is still not showing the image in preview, but only the description and titles tag.
How can I show image in the link preview too?
Why the h1 tag does not change?
Is there anything wrong?
I tried it with alert and it worked perfectly. I mean whenever I typed into input box the alert message showed me the characters. but how about h1 tag?
what did I do wrong?
Here is my snippet:
html {
box-sizing: border-box;
font-size: 2rem;
font-family: 'Georama', sans-serif;
}
body {
background-color: #555;
color: #fff;
display: flex;
justify-content: center;
flex-direction: column;
height: 100vh;
align-items: center;
}
button {
cursor: pointer;
}
.container {
width: auto;
height: 100px;
}
.te {
display: block;
color: white;
}
const text = document.getElementById('pps');
pass.addEventListener('input', (e) => {
const val = e.target.value;
text.innerHTML(val);
});
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js" defer></script>
</head>
<body>
<form class="container">
<label>Type here:</label>
<input
type="text"
placeholder="insert here.,.."
/>
</form>
<h1 class="te" id="pps">PP</h1>
</body>
</html>
</html>
I see two mistakes here:
As it was mentioned in comments innerHTML is property, not a method, so should be called text.innerHTML = e.target.value;
You didn't assign anything to the 'pass' variable.
Also, there's no sense to create the variable if you are going to use the value only once, so we can remove const val = e.target.value; and just use e.target.value directly.
I've attached the working snippet below.
const text = document.getElementById('pps')
document.getElementById('textInput').addEventListener('input', (e) => {
text.innerHTML = e.target.value;
});
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js" defer></script>
</head>
<body>
<form class="container">
<label>Type here:</label>
<input type="text" id="textInput" placeholder="insert here..." />
</form>
<h1 class="te" id="pps">PP</h1>
</body>
</html>
</html>
How to play video from youku using javascript ?
I tried to do like this but not work, how can i do that ?
<iframe id="test" src="https://player.youku.com/embed/XMjUzMzY2ODQ4OA==" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 50%; height: 50%;"></iframe>
<div style=" position: fixed; top: 56%; " onclick="play_fn()">Play</div>
<script>
function play_fn(){
var test = document.getElementById('test');
test.play();
}
</script>
play() is a method found on <video> and <audio> elements. An <iframe> is just a means to embed a URL in a page. It provides no API for playing media.
Unless youku provide an API that you can access (I couldn't find one with a quick search), then there is no way to trigger playback from your page.
Standard cross origin security restrictions imposed by browsers prevent you manipulating the embedded page with JavaScript.
Check my solution. You can figure out the styles for your own case, I'm using the span as overlay above the video and when you click on it, it disappears and the video plays.
const videoSection = document.querySelector('.video');
if(videoSection) {
const playBtn = document.querySelector('.play-btn');
playBtn.addEventListener('click', playVideo);
}
function playVideo() {
const iframeHolder = document.querySelector('.iframe-holder');
const iframeEl = document.querySelector('.iframe-holder iframe');
const playStr = '?autoplay=true';
let baseUrl = iframeEl.getAttribute('src');
iframeHolder.classList.add('play');
iframeEl.setAttribute('src', `${baseUrl}${playStr}`);
iframeEl.setAttribute('allow', 'autoplay');
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Title</title>
</head>
<body>
<div class="video">
<span class='play-btn'></span>
<iframe allowfullscreen="" frameborder="0" src="https://player.youku.com/embed/XMjUzMzY2ODQ4OA=="></iframe>
</div>
</body>
</html>
const videoSection = document.querySelector('.video');
if(videoSection) {
const playBtn = document.querySelector('.play-btn');
playBtn.addEventListener('click', playVideo);
}
function playVideo() {
const iframeHolder = document.querySelector('.iframe-holder');
const iframeEl = document.querySelector('.iframe-holder iframe');
const playStr = '?autoplay=true';
let baseUrl = iframeEl.getAttribute('src');
iframeHolder.classList.add('play');
iframeEl.setAttribute('src', `${baseUrl}${playStr}`);
iframeEl.setAttribute('allow', 'autoplay');
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Title</title>
</head>
<body>
<div class="video">
<span class='play-btn'></span>
<iframe allowfullscreen="" frameborder="0" src="https://player.youku.com/embed/XMjUzMzY2ODQ4OA=="></iframe>
</div>
</body>
</html>
Refer this code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
#overlay {
position: absolute;
top: 100px;
color: #FFF;
text-align: center;
font-size: 20px;
background-color: rgba(221, 221, 221, 0.3);
width: 640px;
padding: 10px 0;
z-index: 2147483647;
}
#v {
z-index: 1;
}
</style>
<title>Overlay HTML over video player</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">//<![CDATA[
window.onload=function() {
var video = document.getElementById('v');
video.play();
}//]]>
</script>
</head>
<body>
<video id="v" controls="">
<source id="webm" src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm">
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div id="overlay" style='display: none;'>This is HTML overlay on top of the video! </div>
</body>
</html>
Not sure what I am doing wrong, but I am very much a novice with javascript and html so probably a lot. I am trying to enable / disable an href link based on the selection of the check box. Here is the code:
<!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>Page Title</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<meta http-equiv="keywords" content="keyword1, keyword2" />
<meta http-equiv="description" content="Description of Page" />
<link href="css/style.css"rel="stylesheet" type="text/css" />
<style type="text/css">
.auto-style1 {
font-size: 12px;
color: #4d4d4d;
line-height: 2em;
margin: 5px;
padding: 0;
text-align: center;
}
.auto-style2 {
text-align: center;
}
.auto-style3 {
font-family: Neogrey;
}
</style>
<script type="jQuery">
$('#link').click(function(){return false; });
$('#check').click(function() {
if(!$(this).is(':checked')){
$('#link').bind('click', function(){ return false; });
}else{
$('#link').unbind('click');
}
});</script>
</head>
<body>
<div class="auto-style2">
<form id="form1" runat="server">
<div class="logo"><h1 class="auto-style3">
</h1></div>
<h2 class="head">Header Text</h2>
<div class="auto-style1">
Welcome Text.<br />
<input type="checkbox" id="check"/><label for="check">I accept the Terms of Service.</label>
<br />
<a href="http://www.google.com" id="link">
<img alt="" height="30" src="images/download.png" width="100" /></a><br />
</div>
<div class="footer">
<div class="menu">
iOS
Android
Blackberry
Support
</div>
</div>
</form>
</div>
</body>
</html>
Any help is greatly appreciated!
Once you've included jQuery, I'd suggest making use of the DOM to make the script a little more efficient:
// bind the click-handler:
$('#link').click(function(e){
// prevent the default action of clicking on a link:
e.preventDefault();
// if the element with id 'check' is checked:
if (document.getElementById('check').checked){
// change the window.location to the 'href' of the clicked-link:
window.location = this.href;
}
});
JS Fiddle demo.
This would lead to the following HTML of your <head> element:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<meta http-equiv="keywords" content="keyword1, keyword2" />
<meta http-equiv="description" content="Description of Page" />
<link href="css/style.css"rel="stylesheet" type="text/css" />
<style type="text/css">
/* CSS removed for brevity */
</style>
<!-- note that this must come before the script containing the jQuery code
which in this case follows immediately -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="jQuery">
$('#link').click(function(e){
e.preventDefault();
if (document.getElementById('check').checked){
window.location = this.href;
}
});
</script>
</head>
Alternatively (though you still need to include jQuery), you could use the following approach:
// binds a change-handler function to the check-box:
$('#check').change(function () {
/* adds the 'disabled' class to the '#link' element if
the '#check' element is _not_ checked, and removes the
class if the '#check' element _is_ checked: */
$('#link').toggleClass('disabled', !this.checked);
/* triggers the change event-handler (so the class-name is toggled
appropriately on page-load: */
}).change();
/* attaches a delegated click-handler to the 'body' element,
if the click occurs on an 'a' element with the 'disabled'
class the function is executed:
*/
$('body').on('click', 'a.disabled', function(e){
// the default behaviour is prevented
e.preventDefault();
});
JS Fiddle demo.
References:
change().
click().
document.getElementById().
event.preventDefault().
on().
toggleClass().
window.location.
Put the following line in between your and tags to be able to use jquery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
Change your line that says:
<script type="jQuery">
To:
<script type="text/javascript">
jsFiddle example
As Tom Gerken was the first to point out, you must include the jQuery library as he demonstrated in his answer. This is really the key point in solving your problem and Tom should receive credit for the correct solution.
However, here is another approach for enabling/disabling the link:
Begin with your href set to "#", as in:
<a href="#" id="link">
Your jQuery code block would do this:
$('#check').click(function() {
if( $(this).is(':checked') ){
$('#link').attr('href','http://www.google.com');
}else{
$('#link').attr('href','#');
}
});
Full Code Example:
<!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>Page Title</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<meta http-equiv="keywords" content="keyword1, keyword2" />
<meta http-equiv="description" content="Description of Page" />
<link href="css/style.css"rel="stylesheet" type="text/css" />
<style type="text/css">
.auto-style1 {
font-size: 12px;
color: #4d4d4d;
line-height: 2em;
margin: 5px;
padding: 0;
text-align: center;
}
.auto-style2 {
text-align: center;
}
.auto-style3 {
font-family: Neogrey;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#link').click(function(){return false; });
$('#check').click(function() {
if( $(this).is(':checked') ){
$('#link').attr('href','http://www.google.com');
}else{
$('#link').attr('href','#');
}
});
}); //END $(document).ready()
</script>
</head>
<body>
<div class="auto-style2">
<form id="form1" runat="server">
<div class="logo"><h1 class="auto-style3">
</h1></div>
<h2 class="head">Header Text</h2>
<div class="auto-style1">
Welcome Text.<br />
<input type="checkbox" id="check"/><label for="check">I accept the Terms of Service.</label>
<br />
<a href="#" id="link">
<img alt="" height="30" src="images/download.png" width="100" /></a><br />
</div>
<div class="footer">
<div class="menu">
iOS
Android
Blackberry
Support
</div>
</div>
</form>
</div>
</body>
</html>
Each time I load a page in Internet Explorer 7 or greater I get the error Object Expected when calling the function below. The script appears right at the bottom of the page before the closing </body> tag. There are no elements with the same name or id.
<script type="text/javascript">
window.onload = show();
</script>
The Javascript function it is attempting to call is
function show() {
obj1
= document.getElementById("container").innerHTML
= '<div style="width: 960px; height: 2000px;"><p>Hello World.<br>Here I am.</p>'
+ '<p>test</p></div>';
}
Why does this error not appear in any of the other browsers?
What do I need to change to resolve the issue?
EDIT 0
If I move the function show into the same block at window.onload, hide() now no longer works.
Javascript code
function show() {
obj1
= document.getElementById("container").innerHTML
= '<div style="width: 960px; height: 2000px;"><p>Hello World.<br>Here I am.</p>'
+ '<p>test</p></div>';
}
function hide() {
obj1 = document.getElementById("container");
if(obj1){
alert("Hi");
obj1.style.display = "none";
obj1.style.visibility = "hidden";
}else{
alert("Cannot find the element with id container.");
}
}
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset="UTF-8" />
<meta http-equiv="content-language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="copyright" content="© 2012" />
<title>takeover</title>
<base href="" />
<link rel="stylesheet" href="" />
<style type="text/css" media="all" />
#container {
position:absolute;
text-align:center;
background-color:#fff;
z-index:9999;
}
</style>
<script type="text/javascript" src="takeover.js"></script>
</head>
<body>
<div>
<div id="container"></div>
<p>qwe</p>
</div>
<script type="text/javascript">
window.onload = show;
</script>
</body>
</html>
EDIT 1
Message that appears when using non-Internet Explorer browsers when placing alert(show) before window.onload
EDIT 2
The message displayed after removing all the white spaces. Again this only works in non-Internet Explorer browsers.
EDIT 3
Tried window.show = function show() and window.hide = function hide() however still get an error in Internet Explorer. The error is show as below.
EDIT 4
Here is the updated code with all the functions in a single file. This does not work in any other browser and I get the error show is undefined.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset="UTF-8" />
<meta http-equiv="content-language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="copyright" content="© 2012" />
<title>takeover</title>
<base href="" />
<link rel="stylesheet" href="" />
<style type="text/css" media="all" />
#container {
position:absolute;
text-align:center;
background-color:#fff;
z-index:9999;
}
</style>
</head>
<body>
<div>
<div id="container"></div>
<p>qwe</p>
</div>
<script type="text/javascript">
alert(show)
window.show = function show() {
obj1 = document.getElementById("container").innerHTML = '<div style="width: 960px; height: 2000px;"><p>Hello World.<br>Here I am.</p><p>test</p></div>';
}
window.hide = function hide() {
obj1 = document.getElementById("container");
if(obj1)
{
alert("Hi");
obj1.style.display = "none";
obj1.style.visibility = "hidden";
}
else
{
alert("Cannot find the element with id container.");
}
}
window.onload = window.show;
</script>
</body>
</html>
This line...
window.onload = show();
Should be this...
window.onload = show;
...because you need to assign the show function itself to window.onload, not its return value from calling it.
Move the <script> block that references container to a point after container is defined:
<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<DIV id="container"></DIV>
<script type="text/javascript">
window.onload = show;
function show() {
obj1 = document.getElementById("container").innerHTML = '<div style="width: 960px; height: 2000px;"><p>Hello World.<br>Here I am.</p>' +
'<p>test</p></div>';
}
</script>
</BODY>
</HTML>
If the <script> block is, for example, inside the <head> then Internet Explorer gives the error:
SCRIPT5007: Unable to set value of the property 'innerHTML': object is null or undefined
on page load.