I've searched this problem of mine and found some solutions but there is something wrong I must be doing because it doesn't work.
I would like to, simply, just press a button and make an image appear in a certain div. Later, I'd like to add more buttons and each button will correspond to an image changing this image in the same div.
My code is this:
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
</style>
</head>
<body>
<button id="button1">Button 1</button><button id="button2">Button 2</button></br>
<button id="button3">Button 3</button><button id="button4">Button 2</button></br>
<p> </p>
<div id="1"></div>
<div id="2"></div>
<script type="text/javascript">
document.getElementById("button1").onclick=function() {
document.getElementById("1").appendChild="<img id="image1" src="img/image1.png" />;
}
document.getElementById("button2").onclick=function() {
document.getElementById("1").appendChild="<img id="image2" src="img/image2.png" />;
}
document.getElementById("button3").onclick=function() {
document.getElementById("2").appendChild="<img id="image3" src="img/image3.png" />;
}
document.getElementById("button2").onclick=function() {
document.getElementById("2").appendChild="<img id="image4" src="img/image4.png" />;
}
</script>
</body>
</html>
but somehow I cannot make this work.
You're using double quotes inside a string encapsulated by double quotes:
"<img id="image1" src="img/image1.png" />;
This needs to be
"<img id=\"image1\" src=\"img/image1.png\" />";
Since JavaScript uses quotes (single or double) to set strings you need to escape quotes inside a string with \ to avoid breaking the string. In your original code JavaScript is parsing the string, finds the end of the string at id= and breaks because it expects a line terminator ; or a +.
Look at the highlighting in the first and second code block. It's all red in the second indicating a correct escaped string.
ALSO
appendChild only works with nodes/elements and not with strings. You need innerHTML, however that will overwrite the content of your div every time. If you don't want that you could use: insertAdjacentHTML()
Example:
document.getElementById("1").insertAdjacentHTML("beforeend", "<img id=\"image1\" src=\"img/image1.png\" />");
Try this:
Javascript:
document.getElementById(<img id>).src = "<link to img>";
HTML:
<img id='<img id>' src='<link to img>'>
Related
why doesn't the commented statement work
HTML CODE:
<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover = "upDate(this)">
JAVASCRIPT CODE:
function upDate(previewPic){
var x=document.getElementById('image');
//x.style.background="url(previewPic.src)";//why doesn't this work while the next statement works
x.style.background="url('"+previewPic.src"')";
}
Why are you using getElementbyId when your class doesn't have an id of image (at least in the sample you provided). Either add the id or select by the class or tag name
In your code "url(previewPic.src)" is full string that's why it doesn't work. Because your code doesn't know what's previewPic.src
If you want to use a variable inside a string you can use string concatenation or template string to do so. You can check my code.
You can check details about template literals from MDN_link
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<img onmouseover="upDate(this)" class="preview" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" >
</body>
<script>
function upDate(previewPic){
console.log(previewPic.src);
previewPic.style.background=`url(${previewPic.src})`;
//x.style.background="url('"+previewPic.src"')";
}
</script>
</html>
Both of your examples do not work, the correct way of setting the background image of an HTML tag is to use
x.style.background = "url("+previewPic.src+")";
note the "+" sign after previewPic.src.
explanation:
First: "url(previewPic.src)"; this changes your previewPic.src into a string literal as its encapsulated in the quotation.
Second: x.style.background="url('"+previewPic.src"')"; this will not work as you're missing "+" sign after previewPic.src
further read MDN
I am trying to add some HTML code and text in a div. If I add just a text there isn't any problem. But if I add some text with HTML code, it automatically adds quotes to my text.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
function test() {
document.getElementById("viewer1").innerHTML = "text";// this is not add any quote to text
document.getElementById("viewer2").innerHTML = "text <b>Bold Text</b>"; //this is add quote to text but not add quote to <b>Bold Text</b>
}
</script>
</head>
<body>
<div id="viewer1"></div>
<div id="viewer2"></div>
<button onclick="test()">Test it</button>
</body>
</html>
It looks like this
viewer1 content = text
viever2 content ="text" <b>Bold Text</b>
I don't want the quotes. How can it be removed?
Take a look at the screenshot below:
The quotes will not shown in web page. it's just for chrome console node.
I've been learning HTML and CSS this semester and originally started to code my project in HTML and CSS, but in order for my project to work, I had to link HTML pages to each other. It ended up making a lot of HTML pages just to change one line of text. I've been trying to get a handle on JavaScript to make my project more efficient. My HTML code looks like this:
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Oakwood</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel=stylesheet type=text/css href=default.css>
</head>
<body>
<div id=back></div>
<div id=drdick></div>
<div id=choice></div>
<div class="typewriter">
<script src="run.js"></script>
<p id=text>While out running someone says “Hi” causing you to trip. He helps you up.</p>
</div>
<div id=move>
<button type="button" onclick="changeThis()">Next</button>
</div>
</body>
</html>
My Javascript Looks like this:
var quoteIndex = 0;
var quotes = [
"Thank you.",
"Are you ok?",
"Yes, I’m not normally this clumsy"
];
function changeQuote() {
++quoteIndex;
if (quoteIndex >= quotes.length) {
quoteIndex = 0;
}
document.getElementById("text").innerHTML = quotes[quoteIndex];
}
function showPic()
{document.getElementById("drdick").src="img/drdickab.png";}
function changeThis() {
changeQuote();
showPic();
}
when I test my code my quotes update how I want them to. My picture does not show up at all. Is there something I am missing when it comes to how HTML and Javascript interact? I have been looking through the forums to figure out what I have wrong, and I haven't been able to figure that out.
Your image is not displaying because you did not specify your image anywhere in your markup, and your javascript is also not enough. But try this inside your body tag:
<body>
<!--replace your button with this code.-->
<div id=move>
<button type="button" onclick="showMyImage();" value="Next"></button>
</div>
<!--I assumed you will display the image just below your button, note that initially your image is hidden and displayed on button click event-->
<div>
<img id="myImage" src="img/drdickab.png" style="visibility:hidden"/>
</div>
</body>
.
<!--There's really no need to have multiple scripts, just one will do the job-->
<script type="text/javascript">
function showMyImage(){
document.getElementById('myImage').style.visibility="visible";
}
</script>
I am making a simple website which changes the image displayed when a button is clicked. But my code doesn't seem to be working as when I click on the button 'Click!' the alt text gets displayed instead of the image changing.The source of the images is perfectly fine, as when I use the same source outside the script the images show up.
<head>
<title>Pic Change</title>
<meta charset="utf-8">
<meta name="Pic Change">
<meta name="keywords" content="face,PES">
<meta name="author" content="Thalle">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body class="body" style="background-color:#4682B4">
<script>
function display(whichimage){
if(whichimage == 0){
document.getElementById('Click').src="C:\.....\Memes\Animals\initial.jpeg"
}
else{
document.getElementById('Click').src="C:\.....\Memes\Animals\Whenlife.jpeg"
}
}
</script>
<image id="Click" src="C:\......\Memes\Animals\initial.jpg" alt="Click Button to click picture" style="width:300px;height:300px" >
<p>
<button type="button" onclick="display(1)">Click!</button>
<button type="button" onclick="display(0)">Reset</button>
</p>
</body>
</html>
The code is fine, you just forgot the file:// before the start. This code shows that when you give a working image src in your code, it will work just fine. Also, don't use files from your disk on Stack Overflow, it gives out private information that you probably don't want on the web.
<head>
<title>Pic Change</title>
<meta charset="utf-8">
<meta name="Pic Change">
<meta name="keywords" content="face,PES">
<meta name="author" content="Thalle">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body class="body" style="background-color:#4682B4">
<script>
function display(whichimage){
if(whichimage == 0){
document.getElementById('Click').src="http://www.iconarchive.com/download/i86425/martin-berube/flat-animal/duck.ico"
}
else{
document.getElementById('Click').src="https://maxcdn.icons8.com/Share/icon/Animals//duck1600.png"
}
}
</script>
<image id="Click" src="http://www.iconarchive.com/download/i86425/martin-berube/flat-animal/duck.ico" alt="Click Button to click picture" style="width:300px;height:300px" >
<p>
<button type="button" onclick="display(1)">Click!</button>
<button type="button" onclick="display(0)">Reset</button>
</p>
</body>
</html>
You forgot the protocol (file://). It should be like
document.getElementById('Click').src="file://C:\Users...";
otherwise it will be just appended to the src everytime you click a button.
Try to put your JavaScript in the <head> section. Then it might work.
Also. There is no such thing as image in HTML. It's img.
In javascript, you need to escape backslashes in strings, so in adresses in particular. Replace all "\" by "\\".
You shouldn't load images from your disk. We and others can't see it. If you use relative paths and you make sure every images and the HTML file is in the same directory, that should be fine. Even if you do, you must specify the file:// protocol. But if you use external images from a website, we could see them.
There is no <image> element in HTML. It's just <img>.
You should type \\ instead of \, because the \ character has a special meaning. However, Javascript is smart, and you can use / too, don't have to follow Windows' method.
Please don't use the onclick attribute. It's really old. Instead use event listeners.
Right now I don't know what is the problem in your code extacly, however, there is a working example:
<!DOCTYPE html>
<html>
<title>Pic Change</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("button").addEventListener("click", function() {
document.querySelector("img").setAttribute("src", "file://C:/Data/300x300-colored.png");
});
});
</script>
<p><img src="file://C:/Data/300x300.png" /></p>
<p><button type="button">Click!</button></p>
</html>
If both images and the index.html is in the C:\Data directory, it works fine.
I'm having an issue with what seems like a simple enough task. I have a web page where I need to load in and remove div content as the user clicks buttons. My code doesn't seem to work though.
The html:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Main Page</title>
<link rel="stylesheet" href="assets/css/stylemain.css"/>
<script src="assets/js/introduction.js"></script>
</head>
<body>
<div id="container">
<div id="content">
<div id="slide1">
<p>Here is the first trigger. It should look something like this</p>
<p><input type="button" onclick="part2()" value="Click Me!" /></p>
</div>
</div>
and the .js file:
function part2() {
document.write("<div id="slide2">
<p>Here is the second trigger. It should be to the left</p>
<p>next line goes here</p>
</div>")
}
It's coming up with a syntax error on line 2 of the js file (the document.write line) but I can't figure out why. I tried it both with and without quotations but to no avail. Any help would be appreciated.
You have to escape the quotes:
function part2() {
document.write("<div id=\"slide2\">\n<p>Here is the second trigger. It should be to the left</p>\n<p>next line goes here</p>\n</div>");
}
A slightly cleaner solution is to use a combination of single quotes and double quotes:
function part2() {
document.write('\
<div id="slide2">\
<p>Here is the second trigger. It should be to the left</p>\
<p>next line goes here</p>\
</div>'
);
}
Note that if you want to use a string broken into multiple lines you must add the '\' in the end of each line to let JS parser know the string continues to the next line.