Pass div to javascript function and change its style - javascript

I'm trying to pass a div's id to a javascript function that does something simple, like change the background color of the div.
Weird thing is, my code works in the w3schools.com Tryit editor, but not in JSFiddle. It also doesn't work in my compiler (Coda 2).
Is this even the right way of going about this? Here's my code:
<!DOCTYPE html>
<html>
<head>
<script>
function changeBackgroundColor(asdf)
{
asdf.style.backgroundColor = "#fff000";
}
</script>
</head>
<body>
<div id="myDiv" style="background:red"> this is my div </div>
<button onclick="changeBackgroundColor(myDiv)"> Set background color </button>
</body>
</html>
and here's the JSFiddle stuff: http://jsfiddle.net/BH9Rs/

You need to use document.getElementById to get the element from the id
function changeBackgroundColor(asdf){
document.getElementById(asdf).style.backgroundColor = "#fff000";
}
and pass the id like this (in single quotes)
<button onclick="changeBackgroundColor('myDiv')">
And in your fiddle put your function inside the Head section.
(select no-wrap in Head) at left side Framework and Extension option
Js Fiddle Demo

Change the script placement combo to no wrap - in <head> (second combo box on the left panel)

myDiv is an unknown identifier.
Use document.getElementById() in order to refer to your div:
<button onclick="changeBackgroundColor(document.getElementById('myDiv'))"> Set background color </button>
In addition, you have to move your JS code in your HTML due to the jsFiddle environment: http://jsfiddle.net/BH9Rs/1/
<script>
function changeBackgroundColor(asdf) {
asdf.style.backgroundColor = "#fff000";
}
</script>
<div id="myDiv" style="background:red">this is my div</div>
<button onclick="changeBackgroundColor(document.getElementById('myDiv'))">Set background color</button>

Inline styles and inline click events? boo.
<div id="myDiv"> this is my div </div>
<button id="clickMe"> Set background color </button>
<script>
document.getElementById('clickMe').onclick = function(){
document.getElementById('myDiv').style.backgroundColor = '#fff000';
}
</script>

You mast do so:
<!DOCTYPE html>
<html>
<head>
<script>
function changeBackgroundColor(asdf)
{
document.getElementById(asdf).style.backgroundColor = "#fff000";
}
</script>
</head>
<body>
<div id="myDiv" style="background:red"> this is my div </div>
<button onclick="changeBackgroundColor('myDiv')"> Set background color </button>
</body>
</html>

Related

when click button move to another html and show layer

Is it possible that when click the button from a.html then move to b.html and show a layer(b.html) ?
I searched some similar example like active tab specific from another HTML.
Using javascript event like hash.location....
Anyone know how to make it and some examples? Thank you
You need 2 HTML files. Let's say you have a.html and b.html in the same folder.
If I understand correctly, you want to change the page when clicking on a button.
You now have 2 solutions :
listening to a click on the button
using a little trick, by having a button element inside a link tag <a>.
Listening to a click on a button
Let's say you have this button in your a.html file :
<button id="pageChanger">Change Page</button>
Then you need to add this JS :
document.getElementById('pageChanger').addEventListener('click', () => {
window.location = 'b.html';
})
(Don't forget that it has to be added at the end of your document, or else it will not load properly
Having a button inside a link
You just need to add this HTML code :
<button>Change page</button>
For example, suppose two html pages are as follows:
page1.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Page 1</title>
</head>
<body>
<button type="button" onclick="window.location.href = 'page2.html#myDiv'">Goto Div in Page 2</button>
</body>
</html>
page2.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Page 1</title>
</head>
<body>
<div>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="myDiv">
This is my div
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
When you click on the ‌Button in the first page, window redirects to the layer in the second page.
In this example, anchor part is used. The anchor part is the part of the URL after the hash sign (#).
Example:
<button type="button" onclick="window.location.href = 'https://stackoverflow.com/jobs?med=site-ui&ref=jobs-tab#profile-summary'">Go!</button>

How to wrap the element with matching button text?

Hi i am trying to append the div to the button with the corresponding to that button text
(i.e. In the case of below example the button text is "Download" so i am appending the div class as new and if the button text is "Upload"
i will append some other div class).
And for the appending div I am using wrap API.
Here is my code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<button class="btn" title="run">Download</button>
<script>
$(document).ready(function() {
var buttontext = $("button").text();
alert(buttontext);
$('button[text="Download"]').wrap("<div class='new'></div>");
});
</script>
</body>
</html>
I am trying to get the button text like this button[text="Download"] but it is not working.
Finally i want the output something like this
<div class="new">
<button class="btn" title="run">Download</button>
</div>
Any help will be appreciated.
You could user jquery's contains method:
$(document).ready(function() {
$('button:contains("Download")').wrap("<div class='new'></div>");
});
Here is a working codepen:
http://codepen.io/egerrard/pen/MJpwdz
And the documentation on contains:
https://api.jquery.com/jQuery.contains

HTML Javascript Onclick?

CAN ANYONE PLEASE HELP ME FIND OUT WHY THE ONCLICK ISNT WORKING... I also have a CSS sheet connecting my span classes but for some reason onclick isnt working...
<head>
<link href="stylizing.css" rel="stylesheet">
<script>
function showCode()
{
document.getElementById("latestDiscountCode").className ="unhideBlock textAlignLeft";
}
</script>
</head>
<p class="textAlignLeft" onclick = "showCode();">
<span class="xxx">
CLICK ME
</span>
</p>
If you use document.getElementById, you need specify the "id":
Example:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
Example by: http://www.w3schools.com/jsref/event_onclick.asp
There is no id specified on your element .
<p class="textAlignLeft" id="latestDiscountCode" onclick = "showCode();">
....
</p>
The id can be placed on whatever element you want to change the classname of. Code above is assuming this is the "p" tag.
Hope this helps.
I suspect you have a typo in either your id name or your stylesheet class names. The code you supplied does not include an element with an of "latestDiscountCode" so I have created one as an example. If you click on the CLICK ME text you will see your browers DOM inspector that the correct classes are added to the div.
<html>
<head>
<link href="stylizing.css" rel="stylesheet">
<script>
function showCode()
{
document.getElementById("latestDiscountCode").className ="unhideBlock textAlignLeft";
}
</script>
</head>
<body>
<p class="textAlignLeft" onclick = "showCode();">
<span class="xxx">
CLICK ME
</span>
</p>
<p id="latestDiscountCode">
foo
</p>
</body>
</html>
I don't think you need that semi-colon ;
<p class="textAlignLeft" onclick = "showCode()">
Move the <script> to the end of the body. Otherwise, it'll execute before the DOM's been loaded. Credits to #Federico.
Alternatively, listen for DOMContentLoaded.

Changing the background of the image on click

I have an image for which I need to change the background onclick. I used following javascript and html to do the thing. For simplicity I first preferred red background and for the reference image is with transparent background.
Code is:
<!DOCTYPE html>
<html>
<body>
<iframe id="myframe" src="img-thing.png"></iframe>
<p>Click the button to change the background color of the picture contained in the iframe.</p>
<p id="demo"></p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = document.getElementById("myframe");
var y = (x.contentWindow || x.contentDocument);
y.body.style.backgroundColor="red";
}
</script>
</body>
</html>
I know there might be something wrong to use iframe here so i tried :
<div id="myframe"><img src="img-thing.png"></div>
instead of the iframe. If I remove the src field from the iframe tag it works fine. But when I insert image and click try now it does not work. Please help.
Why you use an iframe ?
Use an img tag in a div and update the background color of the div
<!DOCTYPE html>
<html>
<body>
<div id="myframe"><img src="http://img1.wikia.nocookie.net/__cb20110821045825/meme/images/3/3d/LOLGuy.png" /> </div>
<p>Click the button to change the background color of the picture contained in the iframe.</p>
<p id="demo"></p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction(){
var myframe = document.getElementById('myframe');
myframe.style.backgroundColor = "red";
}
</script>
</body>
</html>
http://jsfiddle.net/TZXU3/1/
<iframe id="myframe" src="img-thing.png"></iframe>
A png file is an image file. It has no body tag. So it will not work. Instead, try putting a HTML link (eg. something.html) in the src attribute. Hope that helps.
If you want to change the background color of an image, use the img tag, not iframe. Then you can directly access the img element and change its background color, like document.getElementById("someimg").style.backgroundColor = "red";
If you want to change different color on clicking the button, then try this, it may help you
function changePic(picColor) {
if(picName == "btnRed")
{
document.getElementById(mainPic).src = "mainPicRed.jpg"
}
else if(picName == "btnbtnYellow ")
{
document.getElementById(mainPic).src = "mainPicYellow.jpg"
}
}

Click a button and it should load the content into the main content area

I have create 3 buttons on the left menu for "Cars," "Music," and "Games"
When the user clicks one, it should load the appropriate contents into a DIV
in the main content area. Each button should replace the contents of anything
previously displayed in the div. I created my buttons, but I do not know how to
load the content into the main content div or how to replace the previous content.
Can you help please?
Use jquery load function
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<script src="../js/jquery.js"></script>
<script>
function load(url){
$('#content').load(url);
}
</script>
</head>
<body>
<button onclick='load("url1");'>Content 1</button>
<button onclick='load("url2");'>Content 2</button>
<div id='content'></div>
</body>
UPDATE Ok lets clarify it a bit.
The code above uses jQuery lib. Look here for more info about load function.
If you cannot or dont want to use jQuery look here for JS solution.
If you want to use only static content then you have two another options:
//1: if the new content is only small portion of info text
<script>
function load(newContent){
document.getElementById('content').innerHTML = newContent;
}
</script>
<button onclick='load("some text 1");'>Content1</button>
<button onclick='load("another text 2");'>Content2</button>
<div id='content'></div>
//2: put content directly to your page the several DIVs and hide them
<script>
function show(index){
var n=2; // number of DIVs
//show desired content and hide any others
for(var i=1; i<=n; i++){
document.getElementById('content'+i).style.display = i == index ? 'block' : 'none';
}
}
</script>
<button onclick='show(1);'>Content 1</button>
<button onclick='show(2);'>Content 2</button>
<div id='content1'></div>
<div id='content2' style='display:none;'></div>

Categories