I basically have to make this board that has numbers from 1 to 50 and whenever you click on one number, its background changes to a different color. I was able to do it with the first one by making the <div> clickable but I don't know how to do it with the second one that is supposed to have the value 2. Here are my codes
var Color = "#FF0";
function theFunction() {
if (Color == '#FF0') {
Color = '#F00';
} else {
Color = '#FF0';
}
document.getElementById('choose').style.backgroundColor = Color;
}
div#gameboard {
background: #CCC;
border: #999 2px solid;
width: 1200px;
height: 900px;
margin: 70px;
margin-top: 40px;
}
<div id="gameboard">
<div id="choose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">
1
</div>
<div id="chose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">
2
</div>
</div>
So what shall I do for the second div? Thanks
The easiest way is to remove the id's from your "number" divs, move all your styling code to CSS, and be sure to pass in this to the onclick event so you know which number div was clicked. You can then add a clicked class that turns the background red when applied and your JavaScript simply toggles the addition/removal of the clicked class.
function theFunction(e) {
e.classList.toggle("clicked");
}
#gameboard {
background: #CCC;
border: #999 2px solid;
width: 1200px;
height: 900px;
margin: 70px;
margin-top: 40px;
}
#gameboard div {
width: 240px;
height: 150px;
margin-left: 30px;
margin-top: 50px;
background-color: #FF0;
cursor: pointer;
font-size: 130px;
text-align: center;
}
#gameboard div.clicked {
background-color: #F00;
}
<div id="gameboard">
<div onclick="theFunction(this);">
1
</div>
<div onclick="theFunction(this);">
2
</div>
</div>
This will only work for current, modern browsers. If you need to support older versions of IE (namely < IE10) then you will have to change the JavaScript slightly to test for the existence of the clicked class, then add or remove it accordingly.
You might also consider using a framework, like jQuery, where you can easily toggle the add/remove of the clicked class and have all the browser-compatible code obscured within the framework.
Try this.
<div id="choose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">
First you gotta change
onclick="theFunction();"
to this
onclick="theFunction(this);"
And then your function will accept a parameter
function theFunction(element) {
[...]
element.style.backgroundColor=Color;
}
That parameter is the clicked element.
Related
in html, sometimes I have elements that I display only when another one gain focus : you click on a button, to make another one appear.
If then you click on this newly displayed element, it disappears immediately because the focus gets away from the first one.
EDIT : And this is what I want. That could be a drop down menu for example, and I want the list to appears when clicking the title, and I want it to disappear when clicking on an element in the list.
but I also want to capture the click event before the element go away, and I can't do that ! example :
function make_action(element) {
console.log(element);
document.getElementById("output").innerHTML += `<p>detected ${element.innerHTML}</p>`;
};
#buttons {
width: 100px;
padding: 10px;
border: 1px solid black;
}
#buttons:focus p {
display: block;
}
#buttons p {
border: 1px solid blue;
display: none;
}
p {
margin: 5px;
padding: 0px;
}
<div id="buttons" tabindex=0>
<p onclick="make_action(this)" tabindex=0>onclick</p>
<p onfocus="make_action(this)" tabindex=0>onfocus</p>
<p onfocusin="make_action(this)" tabindex=0>onfocusin</p>
</div>
<div id="output">
</div>
I can workaround with the use of opacity and visibility with transition :
opacity to have the ux of the instantaneous hide of the element but it's still present so you can click on it
visibility is being delayed (sort of) with the transition, so for a moment you still have the element because it's still 'visible', but for human eyes it's not visible anymore
like that :
function make_action(element) {
console.log(element);
document.getElementById("output").innerHTML += `<p>detected ${element.innerHTML}</p>`;
};
#buttons {
width: 100px;
padding: 10px;
border: 1px solid black;
}
#buttons:focus p {
/*
display: block;
*/
visibility: visible;
opacity: 1;
}
#buttons p {
border: 1px solid blue;
/*
display: none;
*/
opacity: 0;
visibility: hidden;
transition: visibility 0.5s;
}
p {
margin: 5px;
padding: 0px;
}
<div id="buttons" tabindex=0>
<p onclick="make_action(this)" tabindex=0>onclick</p>
<p onfocus="make_action(this)" tabindex=0>onfocus</p>
<p onfocusin="make_action(this)" tabindex=0>onfocusin</p>
</div>
<div id="output">
</div>
but, I'm not sure it's a good practice because the element is actually still on the page, so it can impact accessibility and maybe other things.
do you know a way to capture the click on the element, before it disappears ?
what I don't understand, is the following : the buttons disappears because the div lose it's focus. But, it loses it's focus BECAUSE a click occurred on one button, so why isn't this click on the button detected ? or how is it detectable ?
You can replace you :focus with :focus-within which was created specially for this purpose.
And to do so that when clicked the elements loses focus, you can use the blur method to do so :
function make_action(element) {
console.log(element);
element.blur()
document.getElementById("output").innerHTML += `<p>detected ${element.innerHTML}</p>`;
};
#buttons {
width: 100px;
padding: 10px;
border: 1px solid black;
}
/* there is the change */
#buttons:focus-within p {
display: block;
}
#buttons p {
border: 1px solid blue;
display: none;
}
p {
margin: 5px;
padding: 0px;
}
<div id="buttons" tabindex=0>
<p onclick="make_action(this)" tabindex=0>onclick</p>
<p onfocus="make_action(this)" tabindex=0>onfocus</p>
<p onfocusin="make_action(this)" tabindex=0>onfocusin</p>
</div>
<div id="output">
</div>
I'm tryin' to create a simple calculator using JS.
I'm using a paragraph tag as a display and the problem is that the text can go beyond the line.
My calculator:
But when I enter more than like 12 buttons this happens:
They way I'm adding numbers looks like:
$('#5').click(function() {
$("#mainline").text(function(i, oldtext) {
return oldtext.replace(/^0$/, '') + '5';
});
});
I tried to put all buttons in a loop that will check the length of the paragraph tag and if it's more than 12 then:
document.getElementsByTagName("button").disabled = true
But I didn't work. What should I do?
HTML:
<div class='calculator'>
<div class='lines'><p id="mainline">0</p></div>
<div id="row1">
<button id='AC'>AC</button>
<button id='pm'><sup>+</sup>/<sub>-</sub></button>
<button>%</button>
<button id='dvd'>/</button>
</div>
CSS:
.calculator {
display: inline-block;
position: relative;
padding-left: 37%;
padding-top: 7%;
}
button {
width: 50px;
height: 40px;
margin-bottom: 1px;
}
#mainline {
border: 3px solid #FF9500;
text-align: right;
}
You have a couple things to think of, as I read in comments.
But here is a suggestion that may be of interest: CSS direction:rtl and text-overflow:ellipsis...
$("#test").on("keyup",function(){
$("#display").text($(this).val());
});
#display{
/* Just for this demo */
height:1em;
width:8em;
border: 1px solid orange;
display:inline-block;
margin-top:0.4em;
/* suggestion */
direction: rtl;
overflow:hidden;
text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type in! <input id="test"><br>
Result: <div id="display"></div>
I'm working on project, and got stuck with JS.
Please before you read text, see the picture.
Picture
I want to make a slider (And I did), and now when I click on a circle, I want to show content-box only with the same color, and others should be hidden.
e.g. when I click on .imgRed, I want only #red to be displayed, others, #blue and #black to be display: none;.
Thank you.
I tried to create a working snippet according to the image, where I used:
A class for the circles, another class for the bars,
The circles got a data-color attribute that will target the bar to be displayed on click.
Here it is:
// When clicking a circle, use the data-colo to display the correct bar
$('.circle').click(function() {
$('.bar').hide();
var color = $(this).data('color');
$('#' + color).show();
});
// Trigger the click event on load:
$('.imgRed').trigger('click');
.circle {
display: inline-block;
margin: 8px 16px;
border: 30px solid;
border-radius: 50%;
height: 0;
width: 0;
}
.bar {
display: none;
margin: 8px 16px;
height: 40px;
width: 250px;
}
.imgRed {
border-color: red;
background-color: red;
}
.imgBlack {
border-color: black;
background-color: black;
}
.imgBlue {
border-color: blue;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle imgRed" data-color="red"></div>
<div class="circle imgBlack" data-color="black"></div>
<div class="circle imgBlue" data-color="blue"></div>
<br><br>
<div class="bar imgRed" id="red"></div>
<div class="bar imgBlack" id="black"></div>
<div class="bar imgBlue" id="blue"></div>
Hope it helps.
You probably know what you should do but you are not confident about it. You should hide others but the one that you want to stay present.
For example for red you should do:
$('.imgRed').click(function() {
$('#red').show();
$('#black').hide();
$('#blue').hide();
}
and repeat for all of the others.
$('.imgRed').click(function(){
$('#red').show();
$('#blue,#black').hide();
});
now when you click on all elements with class .imgRed only those with ID red will be visible.
the same you have to do with your other classes;
I'm not really asking for help with my code, I'm more asking, how do you do this?
When you click my div, the screen goes black, but I want my div underneath to still show as normal, but the rest of the area to be blacked out.
function lightsout() {
document.getElementById("lightsout").style.visibility = "visible";
}
<div style="width:100px;height:100px;border:2px solid blue" onclick="lightsout()">Click Me</div>
<div id="lightsout" style="position:fixed;top:0;left:0;width:100%;height:100%;background-color:black;visibility:hidden;">
You can use the box-shadow property to achieve this effect.
Updated the Code
function lightsout() {
document.getElementById("maindiv").classList.toggle("visible");
}
.visible{
box-shadow: 0 0 0 10000px #000;
position: relative;
}
body{
color: red;
}
<div style="width:100px;height:100px;border:2px solid blue; color: #000;" onclick="lightsout()" id="maindiv">Click Me</div>
Other elements on the page will be hidden...
You can simply add z-indexes to your positioning. With giving the black area a lower z-index than your button but a higher z-index than the rest, you will have your effect.
Also it is recommended to not use inline styles, as your code becomes way more maintainable with styles and markup seperate.
function lightsout() {
document.getElementById("lightsout").classList.toggle("visible");
}
.button {
position: relative;
z-index: 10;
width: 100px;
height: 100px;
border: 2px solid blue;
background: white;
}
#lightsout {
position: fixed;
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: gray;
visibility: hidden;
}
#lightsout.visible {
visibility: visible
}
<div class="button" onclick="lightsout()">Click Me</div>
<div id="lightsout"></div>
Other elements are hidden.
you can use css,
z-index, and add divbox background-color like this :)
function lightsout() {
document.getElementById("lightsout").style.visibility = "visible";
}
#lightsout{
z-index: -1
}
<div style="width:100px;height:100px;border:2px solid blue;background-color:white;" onclick="lightsout()">Click Me</div>
<div id="lightsout" style="position:fixed;top:0;left:0;width:100%;height:100%;background-color:black;visibility:hidden;">http://stackoverflow.com/questions/42688925/how-to-make-a-page-lights-out-except-for-one-element#
I'm making a little website using the jQuery "Slide" effect. I use it multiple times, on 3 div tags. I have one div tag triggering a another div tag to slide in/out. I want there to be one "Dynamic"(The one that moves) div tag and one "Static"(The one that triggers the dynamic) per "Line". The problem I'm having, is that whenever the "Dynamic" one hides after the "Static" one is clicked, the next "Static" div tag moves up a line, making it look really bad. I'll supply a JSFiddle at the end if I wasn't clear enough. Click the thin div to make the fatter ones move.
The HTML:
<div class="tabs">
<div id="static1" class="static"></div>
<div id="dynamic1" class="dynamic"></div>
<br><div id="static2" class="static"></div>
<div id="dynamic2" class="dynamic"></div>
<br><div id="static3" class="static"></div>
<div id="dynamic3" class="dynamic"></div>
</div>
The JS:
$("#static1").click(function() {
$("#dynamic1").toggle("slide", { direction: "right" }, 1000);
});
$("#static2").click(function() {
$("#dynamic2").toggle("slide", { direction: "right" }, 1000);
});
$("#static3").click(function() {
$("#dynamic3").toggle("slide", { direction: "right" }, 1000);
});
The CSS:
.dynamic {
overflow: hidden;
width: 100px;
height: 150px;
background: #ccc;
border-top:1px solid #000;
border-right:0px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #000;
float: right;
background:url('../img/bg_tile.jpg') #333d43;
}
.static {
width: 20px;
height: 150px;
background: #ccc;
border: 1px solid #000;
float: right;
background:url('../img/bg_tile.jpg') #333d43;
}
.tabs {
overflow: hidden;
float: right;
}
JSFiddle: http://jsfiddle.net/3T9je/
You need to 1) clear the left float on the .dynamic style and 2) clear the right float on the .static style like so:
.dynamic {
...
clear:left;
}
.static {
...
clear:right;
}
Demo: http://jsfiddle.net/3QfCf/2/show
Source: http://jsfiddle.net/3QfCf/2/
Can't exactly explain why though. I tried clearing both on the static one but that caused layout issues.
EDIT: I also removed the unneeded <br> tags