I can set the text of a figcaption if I access it by its ID (Line commented out in code below). However I can’t set it if I access the figcaption as firstChild of the figure. Why not?
<body>
<figure id="fig1">
<figcaption id="figcap1">Camberley Mail</figcaption>
<button type="button" id="thumb1" onclick="showBigImg (1);"></button>
<p>Text to go with picture.</p>
</figure>
<script>
"use strict";
function showBigImg(figNum) {
// let temp = document.getElementById("figcap" + figNum);
let temp = document.getElementById("fig" + figNum).firstChild;
temp.innerHTML = "some text";
}
</script>
</body>
</html>
Related
I want to display an image on screen, but define the link to the image in my js script, like so:
<script>
function myFunction() {
var imgUrl = "https://www.linkpicture.com/q/IMG_4902"
var modelName = "Model Name"
document.getElementById("myText").innerHTML = modelName;
}
</script>
<body onload="myFunction()">
<div class="image-area">
<div class="img-wrapper">
<img src="" id="myImg" alt="">
so in the img src, I want to display the image based on the imgUrl content in my script. How is this possible?
You can modify the source of the image by assigning a new value to the src property.
<script>
function myFunction() {
var imgUrl = "https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1"
var modelName = "Model Name"
// document.getElementById("myText").innerHTML = modelName;
document.getElementById("myImg").src = imgUrl;
}
</script>
<body onload="myFunction()">
<div class="image-area">
<div class="img-wrapper">
<img src="" id="myImg" alt="">
</div>
</div>
</body>
Very strange question...this doesn't work for some reason?
document.getElemetnById("myImg").src = imgUrl;
You can do something like this
let myImg=document.querySelector('#myImg');
let imgUrl = "https://www.linkpicture.com/q/IMG_4902";
myImg.src=imgUrl
I'm new to JavaScript and expect a answer from expert.
Suppose following is my piece of content -
<p> This is the first paragraph </p>
<p> This is the second paragraph </p>
and, I want to add few block of code after every paragraph and code became following -
<p> This is the first paragraph </p>
<figure class="x">
<iframe width="300" height="250" style="border:0; margin:0;" src="#">
</iframe>
</figure>
<p> This is the second paragraph </p>
<figure class="x">
<iframe width="300" height="250" style="border:0; margin:0;" src="#">
</iframe>
</figure>
You can try this javascript to get started.
// get all "p" tags
var elements = document.getElementsByTagName('p');
for (var i = 0; i < elements.length; i++) {
// create figure
const figure = document.createElement("figure");
figure.className = "x";
// create iframe
const iframe = document.createElement("iframe");
iframe.setAttribute("width", "300");
iframe.setAttribute("height", "250");
iframe.setAttribute("href", "#");
iframe.style.border = 0;
iframe.style.margin = 0;
figure.appendChild(iframe);
// append to "p" tag
elements[i].parentNode.insertBefore(figure, elements[i].nextSibling);
}
You need to create figure HTML element that has a child iframe and then add the figure element after every p
How to insert an element after another element in JavaScript without using a library?
const paras = document.querySelectorAll("p");
function createIframe(width, height, style, src) {
const iframe = document.createElement("iframe");
iframe.setAttribute("width", width);
iframe.setAttribute("height", height);
iframe.setAttribute("style", style);
iframe.setAttribute("src", src);
return iframe;
}
function createFigureElement() {
const figure = document.createElement("figure");
figure.classList.add("x");
figure.appendChild(createIframe("300", "250", "border:0; margin:0;", "#"));
return figure;
}
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
paras.forEach((p) => {
insertAfter(p, createFigureElement());
});
<p> This is the first paragraph </p>
<p> This is the second paragraph </p>
Probably the shortest way:
document.querySelectorAll('p').forEach(p => {
p.insertAdjacentHTML('afterEnd',
`<figure class="x">
<iframe width="300" height="250" style="border:0; margin:0;" src="#"></iframe>
</figure>`
);
})
<p> This is the first paragraph </p>
<p> This is the second paragraph </p>
<html>
<head>
<title>How To Insert an Image</title>
<script>
function changeImage(){
var img = document.getElementById('image');
image.src='image4.jpg';
}
</script>
</head>
<body>
<img id="image" src="image1.jpg" />
<br><br><br>
<button id="clickme" onclick="changeImage();">Click to change image!</button>
</body>
</html>
I am quite new to Javascript so please dont be too harsh. Basically im trying to switch from one picture to another using a button. So far with this code i have only managed to do 2 images but when i try to add a 3rd or 4th the first image messess up. I was hoping if someone could help me fix this problem.
Here's simplest approach the I used before, for two images. Easily extended to accomodate three, four, or more alternate images.
<div id="image1">
<img ... >
<button ...>
</div>
<div id="image2" style="display: none">
<img ... >
<button ...>
</div>
That is, put the first image, and a button, inside a "< div >" element, and a second image, and a button inside a second "< div >" element that's initially hidden.
Then, each button's javascript simply needs to set its own div's CSS style to "display: none", and remove this style from the other div element, effectively hiding one image, and displaying the other one.
This approach also makes it possible to update the button's text or label, accordingly. If both buttons have the same label, the only apparent result is the image change.
Try this script block instead:
<script>
var images = ['image2.jpg', 'image3.jpg', 'image4.jpg', 'image1.jpg']
function changeImage() {
var img = document.getElementById( 'image' )
var url = images.shift() // remove first url from list
image.src = url // use it
images.push( url ) // append url to the end of the list
}
</script>
What you could do is declare an array which contains all your image urls:
var imageUrls = ["image2.jpg", "image3.jpg", "image4.jpg", "image1.jpg"];
Then when clicking the button, you remove the first image url from the the array by using shift and assign that to variable imageUrl.
Then you set that imageUrl to the src attribute of the image element on your page.
Then you add that imageUrl at the end of the array using push.
This will rotate the images in the imageUrls array on every click.
<html>
<head>
<title>How To Insert an Image</title>
<script>
var imageUrls = ["image2.jpg", "image3.jpg", "image4.jpg", "image1.jpg"];
function changeImage(){
var img = document.getElementById('image');
var imageUrl = imageUrls.shift();
img.src = imageUrl;
imageUrls.push(imageUrl);
}
</script>
</head>
<body>
<img id="image" src="image1.jpg" />
<br><br><br>
<button id="clickme" onclick="changeImage();">Click to change image!</button>
</body>
</html>
You were very close! You just made mistake to assign a value to image.src instead of img.src. have a look at the code below :)
Using clicks:
<html>
<head>
<title>How To Insert an Image</title>
<script>
i = 1; /*Default value, only executed when the page is loaded (default is the first image, so when i + 1 the second image is displayed on first click.)*/
function changeImage(){
var img = document.getElementById('image');
i = i + 1; /*next image*/
if(i == 5) /* if end is reached, reset to first image*/
{
i = 1;
}
img.src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image' + i + '.jpg'; /*number to text in variable, so image + 'number of the image (i)' + extension(.jpg in this case)*/
}
</script>
</head>
<body>
<img id="image" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" height="100px" />
<br><br><br>
<button id="clickme" onclick="changeImage();">Click to change image!</button>
</body>
</html>
Automatic image slider
<html>
<head>
<title>How To Insert an Image</title>
<script>
i = 1; /*Default value, only executed when the page is loaded (default is the first image, so when i + 1 the second image is displayed on first click.)*/
setInterval(function changeImage(){
var img = document.getElementById('image');
i = i + 1; /*next image*/
if(i == 5) /* if end is reached, reset to first image*/
{
i = 1;
}
img.src='image' + i + '.jpg'; /*number to text in variable, so image + 'number of the image (i)' + extension(.jpg in this case)*/
}, 5000)
</script>
</head>
<body>
<img id="image" src="image1.jpg" height="100px" />
</body>
</html>
<div id="first_caption">
<p style="float: left; clear: left">
<img
src="http://www.ottawaskeptics.org/images/stories/lightbulb.jpg"
onmouseover="this.src='http://pngimg.com/upload/small/bulb_PNG1251.png'"
onmouseout="this.src='http://www.ottawaskeptics.org/images/stories/lightbulb.jpg'"
height="50" width="50"
>
<p>How can you save money to do the things you love, and live a healthier life? rollover on the light bulb to see how!</p>
</div>
This is the code. what i am trying to do is make a text appear below the first paragraph when i hover over the image.
Add div or span, assign an ID and then on event add values to the ID.
var div = document.getElementById('divID');
div.innerHTML = div.innerHTML + 'Extra stuff';
here is the complete example:
click here
<div id="heading1">
This is existing text.
</div>
<script>
function myClick(){
text = "This text is added.";
document.getElementById('heading1').innerHTML = document.getElementById('heading1').innerHTML + text;
}
</script>
<html>
<head>
<script type="text/javascript">
function PrintElem()
{
var mydiv1 = document.getElementById("div1");
var mydiv2= mydiv.getElementsByTagName("div2");
printTheDivs(mydiv1, mydiv2);
}
function printTheDivs (d1,d2)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><body>' + d1.innerHTML + '</body></html>');
//Here I want to show the Images in this window.
$(d2).print();
//but want to print the Div2 Images I’m using the jquery.print.js plugin but not working. It is printing complete page. How to accomplish the task with multiple Browsers.
}
</script>
</head>
<body>
<div id="div1">
<img src=”image1.jpg”/>
<img src=”image2.jpg”/>
<img src=”image3.jpg”/>
<img src=”image4.jpg”/>
<img src=”image5.jpg”/>
</div>
<div id="div2">
<img src=”image6.jpg”/>
<img src=”image7.jpg”/>
<img src=”image8.jpg”/>
<img src=”image9.jpg”/>
<img src=”image10.jpg”/>
</div>
<input type="button" value="Print Div" onclick="PrintElem()" />
</body>
</html>
I want to show one div using window.open() and print another div. I’m using the jquery.print.js plugin but not working. It is printing complete page. How to accomplish the task with multiple Browsers. Please help me. Thanks in advance.
You can print particular div
<div id="divid">test</div>
function printDiv(divID) {
//Get the HTML of div
var divElements = document.getElementById(divID).innerHTML;
//Get the HTML of whole page
var oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML only
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
//Print Page
window.print();
//Restore orignal HTML
document.body.innerHTML = oldPage;
}
printDiv('divid')
check here http://jsfiddle.net/jrhp8/