I'm trying for not to change the id property of a paragraph on button click. That first part works. But when the button is clicked again should revert to the original styling. New with JavaScript so any other helpful articles would be great.
Here is the css:
<style type="text/css">
#attention
{
font-size:24px;
background-color:yellow;
width:300px;
}
#normal
{
background-color:white;
font-size:12px;
}
</style>
JS
function changeText() {
var text = document.getElementById("textChange");
text.innerHTML = "New Text";
text.id = "attention";
}
HTML
<div>
<p id="textChange">Some generic text here</p>
<input id="Button1" type="button" value="Do Something" onclick="changeText();" />
</div>
You should use classes for this type of functionality. For example like this:
function changeText() {
var text = document.getElementById("textChange");
text.innerHTML = "New Text";
text.className = text.className == "attention" ? 'normal' : 'attention';
}
So CSS becomes:
.attention {
font-size:24px;
background-color:yellow;
width:300px;
}
.normal {
background-color:white;
font-size:12px;
}
Demo: http://jsfiddle.net/5yx44/
First do not change the ID of the element.
Toggle a class instead.
Do not use inline event attributes. Use DOM3 listeners instead.
CSS
<style type="text/css">
.attention
{
font-size:24px;
background-color:yellow;
width:300px;
}
.normal
{
background-color:white;
font-size:12px;
}
</style>
HTML
<div>
<p id="textChange">Some generic text here</p>
<input id="Button1" type="button" value="Do Something" />
</div>
JS
var btn = document.getElementById('Button1');
btn.addEventListener('click', function() {
var div = document.getElementById('textChange');
div.className = 'attention';
});
Related
i am pretty new to javascript and I am not able to get an IF/ELSE statement to work in a kind of basic configurator I am experimenting, I am sure there's something dumb I am doing.
I have a main image that changes to show the result of a selection, the problem is that the IF statement doesn't seem to work properly, like if it wasn't going through the conditions: basically when selecting a color (black/silver) there are no problems, but when clicking on inserts it should change scr performing the if/else test to change the scr attribute accordingly.
var img = $("#picture");
$("#case_black").click(function() {
img.attr("src", "http://s32.postimg.org/xzqjausjp/black_b.jpg");
});
$("#case_silver").click(function() {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
});
$("#insert_silver").click(function() {
if (img.src == "http://s32.postimg.org/xzqjausjp/black_b.jpg") {
img.attr("src", "http://s32.postimg.org/wfq99kqh1/black_s.jpg");
} else {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
}
});
Here is a fiddle to help you help me:
https://jsfiddle.net/1qdwaa8o/
and a snippet:
var img = $("#picture");
$("#case_black").click(function() {
img.attr("src", "http://s32.postimg.org/xzqjausjp/black_b.jpg");
});
$("#case_silver").click(function() {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
});
$("#insert_silver").click(function() {
if (img.src == "http://s32.postimg.org/xzqjausjp/black_b.jpg") {
img.attr("src", "http://s32.postimg.org/wfq99kqh1/black_s.jpg");
} else {
img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
}
});
body{
background-color:black;
padding:0;
margin:0;
border:0;
text-align:center;
}
.main{
width:432px;
height:422px;
position:absolute;
display:inline-block;
margin-left:-216px;
margin-top:10%;
}
#img_wrapper{
width:350px;
margin-left:41px;
}
#selector_wrapper{
width:auto;
}
.selector_button{
width:50px;
height:50px;
border-radius:25px;
border:1px solid #1C1C1C;
margin: 0 10px;
cursor:pointer;
}
.clear{
clear:both;
}
#case_black{
background-image:url("http://s32.postimg.org/ipqo3nx1d/black.png");
float:left;
}
#case_silver{
background-image:url("http://s32.postimg.org/5qtwxrim9/silver.png");
float:left;
}
#insert_wood{
background-image:url("http://s32.postimg.org/ulderu3gh/wood.png");
float:left;
}
#insert_silver{
background-image:url("http://s32.postimg.org/5qtwxrim9/silver.png");
float:left;
}
#insert_black{
background-image:url("http://s32.postimg.org/ipqo3nx1d/black.png");
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<div class="main">
<div id= "img_wrapper">
<img id= "picture" src="http://s32.postimg.org/xzqjausjp/black_b.jpg" alt="CD1000 with different finishes" />
</div>
<div id= "selector_wrapper">
<div id= "case">
<div class= "selector_button" id= "case_black"></div>
<div class= "selector_button" id= "case_silver"></div>
</div>
<div class= "clear"></div>
<div id= "inserts">
<div class= "selector_button" id= "insert_black"></div>
<div class= "selector_button" id= "insert_silver"></div>
<div class= "selector_button" id= "insert_wood"></div>
</div>
</div>
</div>
</body>
img is a jQuery object, therefore img.src will be undefined.
You need to test img[0].src or img.prop('src').
Get/set src of image using img.attr("src") and not img.src
Or you can make use of: img.get(0).src. img.get(0) is similar to document.querySelector('someSelectorToSelectYourImageAbove').src;
I am trying to create multiple boxes along the top of the page using javascript. I have one box but cannot figure out how to get multiple along the top of the page. This is what I have so far:
<html>
<head>
<title>Boxes on Boxes on Boxes</title>
<link rel="stylesheet" type="text/css" href="boxes.css">
<script language="JavaScript">
el=document.getElementById("box1");
width=window.innerWidth-50;
height=window.innerHeight-50;
el.style.left=width*Math.random();
el.style.top=height*Math.random();
el=document.getElementById("box2");
width=window.innerWidth-50;
height=window.innerHeight-50;
el.style.right=width*Math.random();
el.style.top=height*Math.random();
el=document.getElementById("box3");
width=window.innerWidth-50;
height=window.innerHeight-50;
el.style.middle=width*Math.random();
el.style.top=height*Math.random();
</script>
</head>
<body>
<div id="box1">
First box
</div>
<div id="box2">
Second box
</div>
<div id="box3">
Third box
</div>
</body>
</html>
Here is the CSS that I have:
#box1{
background-color:orange;
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
}
#box2{
background-color:blue;
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
}
#box3{
background-color:green;
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
}
You need to either move the <script> element to the end or wrap your code in a DOM ready or onload handler, because otherwise getElementById() won't find any elements because they won't have been parsed yet.
Then you need to include a unit (e.g., "px") in the left and top style properties.
Also there's no need to recalculate the width and height for each box since you're doing the same calculation for each. (And you should declare your variables with var, but although good practice that isn't essential to make it work.)
Here's a working version:
var el=document.getElementById("box1");
var width=window.innerWidth-50;
var height=window.innerHeight-50;
el.style.left=width*Math.random() + "px";
el.style.top=height*Math.random() + "px";
el=document.getElementById("box2");
el.style.right=width*Math.random() + "px";
el.style.top=height*Math.random() + "px";
el=document.getElementById("box3");
el.style.middle=width*Math.random() + "px";
el.style.top=height*Math.random() + "px";
Demo: http://jsfiddle.net/m3Gg3/
Also the left and top properties in your CSS should use : not =.
It is difficult to understand what you want, maybe this?.
<script>
window.onload = function() {
var titles = ["First box", "Second box", "Third box"]
var width=window.innerWidth-50
var height=window.innerHeight-50-120
for (var i = 0; i < titles.length; i++) {
var el = document.createElement('div')
console.log(el)
el.innerHTML = titles[i]
el.style.position = "absolute"
el.style.border = "1px solid rgb(0,0,0)"
el.style.left= (width / titles.length) * i
el.style.top=0
el.style.width = width / titles.length
el.style.height = "120px"
document.body.appendChild(el);
}
for (var i = 0; i < titles.length; i++) {
var el = document.createElement('div')
console.log(el)
el.innerHTML = titles[i]
el.style.position = "absolute"
el.style.border = "1px solid rgb(0,0,0)"
el.style.left=0
el.style.top=(height / titles.length) * i + 120
el.style.width = "120px"
el.style.height = height / titles.length
document.body.appendChild(el);
}
}
</script>
<html>
<head>
<title>Boxes on Boxes on Boxes</title>
<style type="text/css">
#box_group1, #box_group2, #box_group3, #box_group4, #textbook {
position:absolute;
left:100px;
top:100px;
}
#box1, #box2, #box3, #box10, #box11, #box12 {
padding:5px;
width:50px;
height:50px;
cursor:pointer;
float:left;
}
#box4, #box5, #box6, #box7, #box8, #box9 {
padding:5px;
width:50px;
height:50px;
cursor:pointer;
}
#box1, #box4, #box7, #box10{
background-color:orange;
}
#box2, #box5, #box8, #box11 {
background-color:blue;
}
#box3, #box6, #box9, #box12{
background-color:green;
}
#box4, #box7 {
font-family: Arial;
}
#box5, #box8 {
font-family: Courier;
}
#box6, #box9 {
font-family: Tahoma;
}
#textbook {
padding: 5px;
background-color:red;
}
</style>
<script language="JavaScript">
width=window.innerWidth;
height=window.innerHeight;
function boxes() {
document.getElementById("box_group1").style.left=(width-document.getElementById("box_group1").offsetWidth)/2;
document.getElementById("box_group2").style.top=(height-document.getElementById("box_group2").offsetHeight)/2;
document.getElementById("box_group3").style.left=width-100-document.getElementById("box_group3").offsetWidth;
document.getElementById("box_group3").style.top=(height-document.getElementById("box_group3").offsetHeight)/2;
document.getElementById("box_group4").style.left=(width-document.getElementById("box_group4").offsetWidth)/2;
document.getElementById("box_group4").style.top=height-100-document.getElementById("box_group4").offsetHeight;
document.getElementById("textbook").style.left=(width-document.getElementById("textbook").offsetWidth)/2;
document.getElementById("textbook").style.top=(height-document.getElementById("textbook").offsetHeight)/2;
}
function colorChange(field,group) {
switch (group) {
case 1:
document.getElementById("box2").style.backgroundColor = field.innerText;
break;
case 4:
document.getElementById("box11").style.backgroundColor = field.innerText;
break;
}
}
function fontChange(field,group) {
switch (group) {
case 2:
document.getElementById("box5").style.fontFamily = field.innerText;
break;
case 3:
document.getElementById("box8").style.fontFamily = field.innerText;
break;
}
}
</script>
</head>
<body onload="boxes()">
<div id="box_group1">
<div id="box1" onclick="colorChange(this,1)">
Orange
</div>
<div id="box2" onclick="colorChange(this,1)">
Blue
</div>
<div id="box3" onclick="colorChange(this,1)">
Green
</div>
</div>
<div id="box_group2">
<div id="box4" onclick="fontChange(this,2)">
Arial
</div>
<div id="box5" onclick="fontChange(this,2)">
Courier
</div>
<div id="box6" onclick="fontChange(this,2)">
Tahoma
</div>
</div>
<div id="box_group3">
<div id="box7" onclick="fontChange(this,3)">
Arial
</div>
<div id="box8" onclick="fontChange(this,3)">
Courier
</div>
<div id="box9" onclick="fontChange(this,3)">
Tahoma
</div>
</div>
<div id="box_group4">
<div id="box10" onclick="colorChange(this,4)">
Orange
</div>
<div id="box11" onclick="colorChange(this,4)">
Blue
</div>
<div id="box12" onclick="colorChange(this,4)">
Green
</div>
</div>
<div id="textbook">Textbook</div>
</body>
</html>
Try this using jQuery :
Here the boxes should be created dynamically and without naming the id's hardcoded it also should be done in a better way with your code. It's easier now as you are creating 4 boxes, what about 100 or more. So it's wise to always take the better way to maintain scalability of our work.
HTML :
<div id="mainDiv">
</div>
CSS :
// general css for all divs inside mainDiv
#mainDiv div{
padding:5px;
width:50px;
height:50px;
position:absolute;
left=100px;
top=100px;
float : left;
}
jQuery :
$(document).ready(function(){
// taking a color array
var colorArray = new Array("red", "green", "gray", "blue");
// loop through as many boxes you want to create
for(var i = 1; i <= colorArray.length; i++){
$("#mainDiv").append("<div id=Box" + i + "></div>");
//changing the background-color
$("#Box"+ i).css("background-color", colorArray[i-1]);
}
});
Demo
Here's Another thread explaining similar Case,
And It's Solution
The pink background color disappear after I change the visibility of the container ul tag.
The codes are as follows. Did I miss something ? Why does the li doesn't inherit the background color of ul tag?
<style type="text/css">
.div_r3r4_container { width:760px; background-color:lightblue; }
.div_r3_class { margin-left:132px; width:630px; }
.ul_r3hz_class { background-color:pink; font-size:0px; padding:2px 2px 1px 3px;list-style:none;margin:0; }
.li_r3hz_class { font-size:14px; color:black; display:inline; }
.ul_r4hz_class {background-color:yellow; font-size:0px; border:1px solid red; padding:1px 2px 2px 3px;list-style:none;margin:0; }
.li_r4hz_class {font-size:14px; color:green; display:inline; }
</style>
<div id="div_r3_r4_id" class="div_r3r4_container">
<label id="city"> hide and show ul </label>
<div class="div_r3_class" >
<ul class="ul_r3hz_class" id="sid" >
<li class="li_r3hz_class"> aaaa, aaaa1, aaa2, aaa3, </li>
<li class="li_r3hz_class"> aaaaa4, aaaa5, aaaa5, aaa6, </li>
</ul>
</div>
<div class="div_r4_class" >
<ul class="ul_r4hz_class" >
<li class="li_r4hz_class"> bb, bbb, bbbb, bbbb2, bbbb3 </li>
<li class="li_r4hz_class"> bbbb5, bbb6, bbb7, bbb8, </li>
</ul>
</div>
</div>
<div>
<input id="minus" value="-" type="submit" style="background-color:white; float:right; font-size:6px;" onClick="hide_show_div('sid', 'minus', 'plus' ); return flase; ">
<input id="plus" value="+" type="submit" style="background-color:white; float:right; font-size:6px;" onClick="show_hide_div('sid', 'minus','plus','div_r3_class' ); return flase; ">
</div>
<script language = "JavaScript">
function hide_show_div( hideid1, hideid2, showid1 ){
hideObjDiv( hideid1 ) ;
hideObjDiv( hideid2 ) ;
showObjDiv( showid1 ) ;
}
function show_hide_div( showdivid1, showid2, hideid1, newclass ){
hideObjDiv( hideid1 ) ;
showObjDiv( showid2 ) ;
showObjDiv( showdivid1 ) ;
}
function hideObjDiv(obj) {
if (document.getElementById) {
document.getElementById(obj).style.visibility = 'hidden';
document.getElementById(obj).style.display = 'none';
}
}
function showObjDiv(obj) {
if (document.getElementById) {
document.getElementById(obj).style.visibility = 'visible';
document.getElementById(obj).style.display = 'inline';
}
}
</script>
I've found a problem in your javascript code. As you may know, unordered list tag should be block by default and you are trying to make it inline in your js code (after hiding). Just try to change your showObjDiv function to something like this:
function showObjDiv(obj) {
if (document.getElementById) {
document.getElementById(obj).style.visibility = 'visible';
document.getElementById(obj).style.display = 'block';
}
}
It should work just fine after that.
There is a difference between setting visibility:hidden and display:none . when you set display:none the element will be completely removed from the flow and this element along with all its attributes and styles will be deleted. If obj element has css class *div_r3_class* then (for the sake of simplicity I used jQuery) :
function showObjDiv(obj) {
if (document.getElementById) {
document.getElementById(obj).style.visibility = 'visible';
document.getElementById(obj).style.display = 'inline';
$("#"+obj).addClass('div_r3_class');
}
In this way after re-displaying the element, the specified class will be attached to it.
I am trying to create a label via javascript but the css does not seem to be applied.
Example code (tested in Chrome):
<html>
<head>
<style type="text/css">
#wrapper {
width:700px;
}
#form_groups .label {
float:left;
clear:left;
width:180px;
margin-right:3px;
margin-top:2px;
background-color:red;
}
#the_id {
background-color: #FBEF99;
font-family:"Lucida Console", Monaco, monospace;
font-size: .9em;
width: 300px;
margin-top: 2px;
}
</style>
</head>
<body>
<input type="submit" value="Create" onclick="createForm()"/>
<div id="wrapper">
<form id="form_groups" action="">
<label class="label">Id</label>
<input id="the_id" type="text" value="1">
</form>
</div>
<script type="text/javascript">
function createForm () {
var wrapper = document.getElementById('wrapper');
var form = document.getElementById('form_groups');
wrapper.removeChild(form);
form = document.createElement('form');
form.id='form_groups';
var lbl = document.createElement('label');
lbl.textContent = 'Name';
lbl.class = 'label';
var name = document.createElement('input');
name.type = 'text';
name.id='the_id';
form.appendChild(lbl);
form.appendChild(name);
wrapper.appendChild(form);
}
</script>
</body>
</html>
The text gets the css but the label does not when I press the button Create.
Is there a limitation when assigning a style using class attribute dynamically via javascript?
You should be using className and not class.
lbl.className = 'label';
Modern Day browsers support classList
lbl.classList.add("label");
I want to display paragraphs with the help of js, and I want for every time that user clicks button "right" to display a paragraph but instead all of the paragraphs are being showed. How can I check if a user has clicked a button, so that I can display only ONE next paragraph when the button was clicked.
Thanx in advance.
<style type="text/css">
p {
border:1px solid black;
width:100px;
height:30px;
display:none;
}
</style>
<p>some text1</p>
<p>some text2</p>
<p>some text3</p>
<p>some text4</p>
<p>some text5</p>
<input type="button" value = "left" />
<input type="button" value = "right"
onclick = "
var p = document.getElementsByTagName('p');
for(var i = 0; i <p.length; i++){
show_paragraphs(i);}
"
id = "right"/>
You need to Itrate over each para and check if the previous para is displayed;if displayed set as display none for the previous and for display block as for current one and return.
here is the sample code
<html>
<style type="text/css">
p {
border:1px solid black;
width:100px;
height:30px;
display:none;
}
</style>
<p style="display:block">some text1</p>
<p>some text2</p>
<p>some text3</p>
<p>some text4</p>
<p>some text5</p>
<input type="button" value = "left" />
<input type="button" value = "right"
onclick = "navigate()"
id = "right"/>
<script>
function navigate(){
var p = document.getElementsByTagName('p');
for(var i = 1; i <p.length; i++){
if( p[i-1].style.display == 'block')
{
p[i].style.display = 'block' ;
p[i-1].style.display ='none';
return;
}
}
}
</script>
</html>
Check out the Content Swapper jQuery plug-in which does exactly what you're trying to do.
Or if you must do it your way, here's your code modified to work:
<!doctype html>
<html>
<head>
<style type="text/css">
p {
border:1px solid black;
width:100px;
height:30px;
display:none;
}
</style>
<script>
var i=0, paras = document.getElementsByTagName('p');
function hideAllPara() {
for(var j=0; j<paras.length; j++) {
paras[j].style.display = 'none';
}
}
</script>
</head>
<body>
<p>some text1</p>
<p>some text2</p>
<p>some text3</p>
<p>some text4</p>
<p>some text5</p>
<input type="button" value = "left" />
<input type="button" value = "right" onclick = "hideAllPara(); paras[i].style.display = 'block'; i = (i < paras.length-1) ? i+1 : 0;" id = "right"/>
</body>
</html>
You must note though, working with inline click events or JavaScript is never recommended.
Anyway, so basically each time you click the right button, first we need to hide all paragraphs, then display only the one required; to do that we need to keep track of the index/pointer and reset it once we've reached the end.
And if you wish to show a paragraph when the page load, you could do any of the following in CSS:
p:first-child {display: block;}
p:nth-child() /* specify whatever index you wish to show off all the selected paragraphs on the page */
Give a class name called "active" to the paragraph you wish to show and declare it in CSS as so; p.active {display: block;}
What about:
var left=document.getElementById("left");
var right=document.getElementById("right");
var show=function(){
var paragraphs=document.getElementsByTagName("p");
var current=0;
var len=paragraphs.length;
return function(event){
var button=event.target.id;
var direction=0;
var visi="visible";
if(button==="left"){
visi="hidden";
direction=(current>0)?-1:0;
} else {
direction=(current<len-1)?1:0;
}
paragraphs[current].style.visibility=visi;
current+=direction;
};
}();
left.addEventListener("click", show);
right.addEventListener("click", show);
jsFiddle