I have looked literally everywhere. The goal is to
Use the classes in the stylesheet to set color and background
For example, class selector colorA will set the text color to color ‘A’
Change the color of the text by changing the class of the div with id foreground
Change the background color by changing the class of the div with id background.
I was able to change it by manually entering the color, but when I try to change it by getting className it fails.
Here is my code Ive tried several different things with no luck, please help:
JavaScript:
function changeBG(col) {
var x = document.getElementsByTagName("DIV")[0];
x.backgroundColor = (col);
}
HTML:
<body>
<div class="holder">
<div id="background" class="backgroundC">
<div id="foreground" class="colorE">
<p>
Lorem ipsum </p>
</div>
</div>
</div>
<div class="holder">
<table>
Foreground <INPUT type="button" value="A" class = "colorA" name="button3" onClick= "document.fgColor= 'colorA'">
<INPUT type="button" value="A" class = "colorB" name="button3" onClick="document.fgColor='.colorB'">
Background <INPUT type="button" value="B" class = "backgroundA" name="button3" onClick="document.bgColor = '.backgroundA'">
<INPUT type="button" value="B" class = "backgroundB" name="button3" onClick= changeBG(document.getElementsByClassName("backgroundB"))>
</table>
</div>
CSS Stylesheet:
.colorA {
color: #4581cf;
}
.colorB {
color: #B7E2FF;
}
.backgroundA {
background-color: #4581cf;
}
.backgroundB {
background-color: #B7E2FF;
}
Try this
Make sure you are passing correct class nam
function changeBG(col) {
var x = document.getElementsByTagName("DIV")[0];
x.className=col;
}
changeBG's first parameter is wrong.
in w3c getElementsByClassName method definition
The getElementsByClassName() method returns a collection of all elements in the document with the specified class name, as a NodeList object
in html code, click event binding
onClick= changeBG(document.getElementsByClassName("backgroundB"))
in js, click event handler
x.backgroundColor=col;
col object is a collection of elements have class attribute containing 'backgroundB'.
backgroundColor is a element property, set with color value. ex) #f3f3f3
You can fix it like this.
x.className = "background" + col[0].value; //col[0] is the input element classfied 'backgroudB'. col[0].value equals 'B'
The className property sets or returns the class name of an element.
Using JQuery.
Create a new form and then copy this code and paste it, you will notice how specific div in specific class color can be changed easily.
<html>
<head>
<title>The Selecter Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".big, #div3").css("background-color", "yellow");
});
</script>
</head>
<body>
<div class="big" id="div1">
<p>This is first division of the DOM.</p>
</div>
<div class="medium" id="div2">
<p>This is second division of the DOM.</p>
</div>
<div class="small" id="div3">
<p>This is third division of the DOM</p>
</div>
</body>
</html>
Related
I am making a grocery cart list, where you can add groceries onto the website and it adds all of the prices together. But the problem is, I dont know how to add an item onclick. Here is the link to the site: https://aaryank.codewizardshq.com/GroceryCart/index.html
Here is my html:
<link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Covered+By+Your+Grace" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:800" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<div class="page" id="page">
<title> Your Grocery Cart </title>
<header>
<h1> Your Grocery Cart </h1>
</header>
<span> <u> Your Items </u> </span>
<br><br>
<div class="item" id="item">
<u><span id="itemSpan"> Item #<span id="itemNumber"></span></span></u>
<br>
</div>
<input type="text" id="itemName"><span>, $<input id="priceInput"></span>
<br><br>
<button onclick="addItem()"> + Add an Item + </button>
<br><br><br><br>
<span> <u> Total Amount ($) </u> </span>
<br><br>
<input type="text" id="outputBox" name="outputBoxName" disabled="disabled">
<br>
</div>
<script type = "text/javascript" src = "js.js"></script>
I don't have any javascript, just "function addItem(){}".
I suppose what you are looking for is how to create a new DOM element, a DIV in this case, and how to add it somewhere in the DOM, programmatically.
Generally speaking, you first create an element
// Create a new div
var new element = document.createElement("div");
// Set its content to something meaningful
element.innerHTML = "Hi I am new"
then, you need to append this new element as a child of some other element, its "container" so to say. Let's add it to that middle div which you named "page".
// Get a container for your new div
var container = document.getElementById("page");
// Add your new div to the container
container.appendChild(element);
There are two common ways to add a javascript click handler in web development.
The first way is to attach it in the HTML, via an onclick attribute:
<div id="myDiv" onclick="alert('hello, world');">Contents of Div</div>
The second way is to attach it from JavaScript. In script, you will need to have a handle on the DIV element; you can use functions like document.getElementById or document.querySelector to do this. The former takes as its parameter a string which is an element id; the latter takes a CSS-style selector.
Either of these will get a handle to the DIV above:
var myDiv = document.getElementById("myDiv");
var myDiv = document.querySelector("#myDiv");
Once you have the handle, you can use its addEventListener method trigger your function when the event is emitted.
function myFunction() {
console.log('hello, world');
}
myDiv.addEventListener("click", myFunction);
I recently came across this scenario where I wanted to add css property to a class instead of an element.
When i do this
$('.class_with_css').css({display:'none'});
It would add the style "display:none" to all the elements that has the class "class_with_css" currently.
But in my case I had to apply "class_with_css" class to a new element after the above code was executed and want to retain this style addition. Is there a way to do this (something like add the property to the css class itself) without recalling the above function?
Eg.
two elements
<div id=1 class="abc" ></div>
<div id=2 class="abc" ></div>
Run the code
$('.abc').css({display:'none'});
The element becomes:
<div id=1 class="abc" style="display: none;" ></div>
<div id=2 class="abc" style="display: none;" ></div>
Now i add class abc to element like this
<div id=3 class="abc" ></div>
Is there a way to make class "abc" to hold the style instead of element so that step 4's element also has display:none
No, there is no way to achieve what you want directly. The way it usually is done by already having css class with desired changes/properties and applying that class instead of css property.
So, you will have for example:
.hide {
display: none
}
and add the class to elements:
$('.abc').addClass('hide');
UPDATE
Another option if you really want to dynamically add css class, would be the answer posted here
You can inject style to your header.
BUT REMEMBER From that point on. You have to use display: block; to show it. Otherwise the default style will be display: none; until you refresh the page.
Inject() is injecting style to your header
Add() is adding "abc" class to your other divs
Showme() is adding "display: block" to ".abc"
Hideme() is adding "display: none" to ".abc"
function Inject(){
$('head').append('<style type="text/css">.abc {display: none;}</style>');
}
function Add() {
$("#w").addClass("abc");
$("#z").addClass("abc");
}
function Showme() {
$(".abc").css("display","block");
}
function Hideme() {
$(".abc").css("display","none");
}
button {
border: 0;
padding: 1% 3%;
background-color: lightgray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="x" class="abc">x</div>
<div id="y" class="abc">y</div>
<div id="w">w</div>
<div id="z">z</div>
<p>First Click below and see how w and z are not hiding</p>
<button onclick="Inject()">Click to inject style to head</button>
<p>Second click below and add "abc" class to w and z.</p>
<button onclick="Add()">Click to add abc to w and z</button>
<p>Then click below to add style="display:block;"</p>
<button onclick="Showme()">Click to show anything with class "abc"</button>
<p>Then click below to add style="display:none;"</p>
<button onclick="Hideme()">Click to hide anything with class "abc"</button>
<div class="b">
<h1>Hello</h1>
<div class="a">
<p class="ABC">A..........Z</p> //this could be present in some pages
</div>
</div>
This is a piece of code in which I want to add css properties to <h1> of div with class "b" if <p> contains class="ABC".
How to do it?
if($('p').hasClass('ABC')){
$('h1').addClass('b');
}
You can use dot in between the tag name and class to refer the element.
Try $('div.b p.ABC') as the selector:
div.b will select any div with class b
The following space indicate the next matched element (p.ABC) will be inside the previous element (div.b).
p.ABC will select any div with class ABC
$('div.b p.ABC').addClass('test');
.test{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b">
<h1>Hello</h1>
<div class="a">
<p class="ABC">A..........Z</p> //this could be present in some pages
</div>
</div>
$('.b').each(function() {
var b = $(this);
var h1 = b.find('h1');
var p = b.find('div.a p');
if (p.is('[class="ABC"]')) {
h1.css({color: 'red'});
}
});
this check exact attribute class="ABC" if you want case insensitive you can use p.is('.abc') or p.hasClass('abc') and if you want if it have class ABC uppercase you can use is('[class^="ABC "],[class$=" ABC"], [class="ABC"]')
You can use:
if($(".b p.ABC").length)
To check if the element with the class b has a p tag as a child that has the class ABC.
You can then add css using .css to the appropriate element (here that element is $(".b h1")).
See working example below:
if($(".b p.ABC").length) {
$(".b h1").css({'color': 'red'});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b">
<h1>Hello</h1>
<div class="a">
<p class="ABC">A..........Z</p> //this could be present in some pages
</div>
</div>
In my js function, I want to change the attribute of certain elements inside a div, then I need to pass the html content of that div to another function. However, the html I obtained by using html() method is not changed. How can I get the html after the change? The code is shown below:
function copyDiv() {
//set the content of the textarea
$('#text_field').val("test");
//get the content of the textarea, the content is changed
alert($('#text_field').val());
//get the html content and set it to the new div
//However, this html is not changed
$('#newDiv').html( $('#myDiv').html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<label for="text_field">text: </label>
<textarea class="form-control" id="text_field"></textarea>
</div>
<div id='newDiv'>
</div>
<button type="button" onclick="copyDiv();">test</button>
I've modified your code to copy the value of the textarea to the new textarea after the HTML is duplicated, since this value isn't part of the DOM (and won't come along automatically).
I also removed the ID attribute from the textarea, since you can't have multiple elements on one page with the same ID, which your code was resulting in.
function copyDiv() {
$formControl = $('#myDiv .form-control');
//set the content of the textarea
$formControl.val("test");
//get the content of the textarea, the content is changed
alert($formControl.val());
//get the html content and set it to the new div
$('#newDiv').html( $('#myDiv').html());
$('#newDiv .form-control').val( $formControl.val() );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<label for="text_field">text: </label>
<textarea class="form-control" name="text_field"></textarea>
</div>
<div id='newDiv'>
</div>
<button type="button" onclick="copyDiv();">test</button>
Use jQuery.clone() instead of .html().
Replace this
$('#newDiv').html( $('#myDiv').html());
to be this
$('#newDiv').html( $('#myDiv').clone());
You can try the following code,in case you want to set the content inside the text area you should use this code $('#text_field').text("test"); and set the inner text of the text area.
In case you want to change the value attribute you can use this code $('#text_field').attr("value","test");.The rest of the code is the same.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Tring Reset</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<label for="text_field">text: </label>
<textarea class="form-control" id="text_field"></textarea>
</div>
<div id='newDiv'>
</div>
<button type="button" onclick="copyDiv();">test</button>
<script>
function copyDiv() {
//set the content of the textarea
$('#text_field').text("test");
//to set the value attribute of th text area
$('#text_field').attr("value","test");
//get the content of the textarea, the content is changed
alert($('#text_field').text());
//get the html content and set it to the new div
//However, this html is not changed
$('#newDiv').html( $('#myDiv').html());
}
</script>
</body>
</html>
http://acko.net/dev/farbtastic
I would like to have a few INPUT and users can change color for each. However, each input is synced with some other classes (like body background color, or menu background color).
I want to be able to change color with Farbtastic Color Picker and it affects BOTH the INPUT and the CLASS / ID that synced with the INPUT. How to do that? The example below will make color in "colorwell" changed only but how to sync other element to #color1, #color2... separately? Thanks
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#demo').hide();
var f = $.farbtastic('#picker');
//var p = $('#picker').css('opacity', 0.25);
//var selected;
$('.colorwell')
.each(function () { f.linkTo(this); })
.focus(function() {
//if (selected) {
// $(selected).css('opacity', 0.75).removeClass('colorwell-selected');
//}
f.linkTo(this);
//p.css('opacity', 1);
//$(selected = this).css('opacity', 1).addClass('colorwell-selected');
});
});
</script>
<form action="" style="width: 500px;">
<div id="picker" style="float: right;"></div>
<div class="form-item"><label for="color1">Color 1:</label><input type="text" id="color1" name="color1" class="colorwell" value="#123456" /></div>
<div class="form-item"><label for="color2">Color 2:</label><input type="text" id="color2" name="color2" class="colorwell" value="#123456" /></div>
<div class="form-item"><label for="color3">Color 3:</label><input type="text" id="color3" name="color3" class="colorwell" value="#123456" /></div>
</form>
I had to modify the farbtastic.js file slightly... basically I added this line:
$('.' + this.id).css('background-color',fb.color);
below line 234 in the original script. It takes the ID from the currently selected input box and changes the background-color of the same class as the ID. So changing #color1 with farbtastic will also update the .color1 class. You may need to modify the farbtastic.js yourself if you want change something other than the background color.
Get the modified farbtastic.js here and see a demo here.