I am a beginner and have created a piece of code that displays an image picked from a folder of images. I would like some help creating some code that will:
- Hide the image when you first visit the page
- Include a button that, when pressed will show the image
Any help would be greatly appreciated and I will include my code (so far) below.
<!doctype html>
<html>
<head>
<style>
</style>
<meta charset="utf-8">
<title>random image?</title>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\" />");
</script>
</body>
</html>
You can initially hide the image with CSS in the style tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>random image?</title>
<style>
img{
display:none;
}
</style>
<script>
function showImage(){
document.getElementsByTagName("img")[0].style.display = "inline-block";
}
</script>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\" />");
</script>
<button onclick="showImage();">show</button>
</body>
</html>
Or by typing it directly in the inline style attribute:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>random image?</title>
<script>
function showImage(){
document.getElementsByTagName("img")[0].style.display = "inline-block";
}
</script>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\" style=\"display:none;\"/>");
</script>
<button onclick="showImage();">show</button>
</body>
</html>
Or by calling a JavaScript function when the page loads (at the risk of the image flashing on screen before it's hidden):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>random image?</title>
<script>
function hideImage(){
document.getElementsByTagName("img")[0].style.display = "none";
}
function showImage(){
document.getElementsByTagName("img")[0].style.display = "inline-block";
}
</script>
</head>
<body onload="hideImage();">
<script type = "text/javascript">
<!--
document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\"/>");
</script>
<button onclick="showImage();">show</button>
</body>
</html>
If I were to do this myself, I'd do it like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>random image?</title>
<script src="https://randojs.com/1.0.0.js"></script>
<style>
#myImage{
display:none;
}
</style>
<script>
function showImage(){
var image = document.getElementById("myImage");
if(image.style.display != "inline-block"){
image.src = rando(1, 42) + ".jpg";
image.style.display = "inline-block";
}
}
</script>
</head>
<body>
<img src="" alt="Random image" id="myImage"/>
<button onclick="showImage();">show</button>
</body>
</html>
The "rando" function is sourced from a tool called rando.js that I use to simplify randomness in javascript and make it more readable. It's not a native JavaScript function, so I source it in with this line:
<script src="https://randojs.com/1.0.0.js"></script>
Everyone has their own style. Pick the technique that works best for you.
Related
Try dynamically load a JavaScript library.
And I got error - alertify is not defined. I have HTML code with libraries (alertify). I can't insert it to iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<iframe class="ifr"></iframe>
<script>
$(document).ready(function () {
var iframe =
'<p>Text 1</p>' +
'<script src="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/alertify.min.js"><\/script>' +
'<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/css/alertify.min.css"/>' +
'<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/css/themes/default.min.css"/>' +
'<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/css/themes/semantic.min.css"/>' +
'<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.13.1/build/css/themes/bootstrap.min.css"/>' +
'<p>Text 2</p>' +
'<script>alertify.success("Success message");<\/script>';
$(".ifr").contents().find("body").html(iframe);
});
</script>
</body>
</html>
Sample with jQuery.
I got error:
$ is not defined.
I have HTML code with libraries (jQuery). I can't insert it to iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<iframe class="ifr"></iframe>
<script>
$(document).ready(function () {
var iframe =
'<p>Text 1</p>' +
'<script src="https://code.jquery.com/jquery-3.4.1.js"><\/script>' +
'<p>Text 2</p>' +
'<script>$("p").remove();<\/script>';
$(".ifr").contents().find("body").html(iframe);
});
</script>
</body>
</html>
this should work, try loading the jquery dynamically then when the onload is called it can fire your custom code. see my example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<iframe class="ifr"></iframe>
<script>
$(document).ready(function () {
var iframe =
'<p>Text 1</p>' +
'<script src="https://code.jquery.com/jquery-3.4.1.js"><\/script>' +
'<p>Text 2</p>' +
'<script>' +
'var el = document.createElement("script"); ' +
'el.src = "https://code.jquery.com/jquery-3.4.1.js"; ' +
'el.onload = function(){ ' +
' $("p").remove(); ' +
'}; ' +
'document.getElementsByTagName("body")[0].append(el);' +
'<\/script>'
$(".ifr").contents().find("body").html(iframe);
});
</script>
</body>
</html>
here is the script itself (uncoded, easier for you to understand):
<script>
var el = document.createElement("script");
el.src = "https://code.jquery.com/jquery-3.4.1.js";
el.onload = function(){
// Put your code here that needs jquery.
$("p").remove();
};
document.getElementsByTagName("body")[0].append(el);
</script>
Issue I am having is as follows: This for loop should be putting a number in the address and counting up to 152 and then putting it full address as follows
<img src="http://pokeapi.co/media/img/1.png">
<img src="http://pokeapi.co/media/img/2.png">
and so on. What am I missing?
var webaddress = ['<img src="http://pokeapi.co/media/img/">'];
var text = "";
var i;
for (i = 0; i < 152; i++) {
text += webaddress[i] + ".png";
}
document.getElementById("Pokeman").innerHTML = text;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</style>
<script type="text/javascript" rel="script" type="script" href="script.jss"></script>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
</head>
<body>
<div id="container">
<p id="Pokeman"></p>
</div>
</body>
</html>
You can create the webaddress as root string and replace it inside loop
var webaddress = '<img src="http://pokeapi.co/media/img/[index].png">';
var text = "";
for (var i = 1; i <= 152; i++) {
text += webaddress.replace("[index]", i);
}
document.write(text);
You are setting your javascript in the head - but the element that is referenced (#Pokeman) is not in the DOM yet - simply move the js block to the end - before the closing body tag. and since you are using jquery - i simplified the js and used it too.
EDIT - I just inserted your img code into the function so that it will render the images as the number increments.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="container">
<p id="Pokeman"></p>
</div>
<script type="text/javascript" rel="script" type="script" href="script.jss"></script>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script>
$(document).ready(function(){
for (var i = 1; i <= 152; i++) {
$("#Pokeman").append('<img src="http://pokeapi.co/media/img/'+ i + '.png"/>');
}
})
</script>
</body>
</html>
HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="index.js"></script>
<title>Design All</title>
</head>
<body>
<h2>------------------------</h2>
<h1 id="test">Should this change?!</h1>
<h2>------------------------</h2>
</body>
</html>
External JavaScript Code:
var product = "Camera";
var price = 130;
var introduction = document.getElementById("test");
introduction.innerHTML = product + " " + price;
Note:
1. If i use a function call, it works.
2. If i write the script within the HTML file, it works as well.
3. I used jsfiddle, it displays perfectly fine.
Can anyone help me with this issue?
I think HTML was not loaded yet. Use onload attribute on body to ensure DOM is loaded :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
var myFunction = function() {
var product = "Camera";
var price = 130;
var introduction = document.getElementById("test");
introduction.innerHTML = product + " " + price;
}
</script>
<title>Design All</title>
</head>
<body onload="myFunction()">
<h2>------------------------</h2>
<h1 id="test">Should this change?!</h1>
<h2>------------------------</h2>
</body>
One thing you have to be clear is that HTML loaded sequentially.
In your code
...........................
<script src="index.js"></script>
................
....................
<h1 id="test">Should this change?!</h1>
Here the JavaScript loaded first then the remaining html.
As the JavScript will execute when it is loaded for the way you write it, it will not find the later html tags. So it will not get that element (<h1 id="test">Should this change?!</h1>).
But if you load the JS later then it will work as expected.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Design All</title>
</head>
<body>
<h2>------------------------</h2>
<h1 id="test">Should this change?!</h1>
<h2>------------------------</h2>
</body>
<script src="index.js"></script>
That's why experts suggest to load JS at the end.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Design All</title>
<script src="index.js"></script>
</head>
<body onload = "chng()">
<h2>------------------------</h2>
<h1 id="test">Should this change?!</h1>
<h2>------------------------</h2>
</body>
</html>
index.js
// JavaScript
function chng(){
var product = "Camera";
var price = 130;
var introduction = document.getElementById("test");
introduction.innerHTML = product + " " + price;
}
<!Doctype html>
<html lang = "en">
<head>
<title>HTML 5 Canvas</title>
<meta charset = "utf 8">
<script type = "text/javascript">
var canvasOne = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
</script>
</head>
<body>
<canvas id = "canvasOne" width = "500" height ="300">
context.fillStyle = "#ffffaa";
context.fillRect(0,0,500,300);
</canvas>
</body>
</html>
It would be greatly appreciated if someone can post some working code in order for me to properly implement a "yellow filled canvas". Thanks
Try this:
<!Doctype html>
<html lang = "en">
<head>
<title>HTML 5 Canvas</title>
<meta charset = "utf 8">
</head>
<body>
<canvas id = "canvasOne" width = "500" height ="300"></canvas>
<script>
var canvasOne = document.getElementById("canvasOne");
var context = canvasOne.getContext("2d");
context.fillStyle = "#ffffaa";
context.fillRect(0,0,500,300);
</script>
</body>
</html>
Because you're putting JavaScript instructions inside <canvas> rather than inside <script>.
Why won’t this work?
<html>
<head>
<title>Learning the basics of canvas</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com?/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
context.fillRect(40, 40, 100, 100);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<!-- Insert fallback content here -->
</canvas>
</body>
</html>
Your code is missing a doctype, and there's a typo.
Doctype:
<!DOCTYPE html>
Typo:
http://ajax.googleapis.com?/ajax/libs/jquery/1/jquery.min.js
should be
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
Fixed code:
<!DOCTYPE html>
<html>
<head>
<title>Learning the basics of canvas</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
//<![CDATA[
$(document).ready(function() {
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
context.fillRect(40, 40, 100, 100);
});
//]]>
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<!-- Insert fallback content here -->
</canvas>
</body>
</html>
You need a DOCTYPE. Insert <!DOCTYPE html> at the very top of your page
Add the HTML 5 doctype tag. Many browsers are also still rendering XHTML by default and need you'll need to indicate that this is a HTML 5 format.
http://www.w3schools.com/html5/tag_doctype.asp
Try canvas.getContext('2d'), without the intervening get(0).