<div id="z1" onclick="document.getElementById('q1').style.display=''; document.getElementById('z1').style.display='none';" style="border:solid 1px; background- color: #DDDDDD; width:936px; height:auto; margin-left:0px;margin-right:0px;">
<h2> Pg. 419-423, problems 8-14 even, 20-30 odd, AYP 1-10</h2></div>
<div id="q1" onclick="document.getElementById('q1').style.display='none'; document.getElementById('z1').style.display='';" style="display:none; border:solid 1px; background-color: #DDDDDD; width:938px; height:auto;margin-left:0px;margin-right:0px;">
<h2> Pg. 419-423, problems 8-14 even, 20-30 odd, AYP 1-10</h2>
</br>
<img src="http://www.rediker.com/reports/samples/Attendance-Period/Homework-Assignment- form.jpg"></img></div>
The above script is what I planned on using to create a spoiler. Basically, when the user clicks on the z1 element, it hides itself and shows the q1 element, and vice-versa. It works on all browsers besides IE. Linking Jquery would be a small liability.
I think this is what you're looking for. You're missing to add display: block
Change this
document.getElementById('z1').style.display='';
to
document.getElementById('z1').style.display='block';
You should think about cleaning your code.
HTML:
<div id="z1" onclick="aa()"></div>
<div id="q1" onclick="bb()">
<img src="http://www.rediker.com/reports/samples/Attendance-Period/Homework-Assignment-form.jpg"/>
</div>
JS:
function aa() {
document.getElementById('q1').style.display = 'block';
document.getElementById('z1').style.display = 'none';
}
function bb() {
document.getElementById('q1').style.display = 'none';
document.getElementById('z1').style.display = 'block';
}
Working JSfiddle
Related
First of all, I'm a Japanese beginner web devlopment learner.
So, My English might be weird and I don't have enough knowledge about programming.
I'm taking a course called javascript30 that focuses on various usage of vanilla JS and
I'm currently making a scheme to check the multiple checkboxes by pushing shift button and clicking it(if my explanation doesn't make scence, please copy and paste the source code below)
Accornig to source code, I gotta change the boolean of "inBetween" by setting if sentence.
I can understand what he does but I can't understand that where does "this" of "checkbox === this" refer to?
Why writing the code like "checkbox === this" means that it checks if check box is checked?
And I also struggle to catch the meaning of"let lastChecked".
I understand "let lastChecked" is the key to check if it is the last checkbox that was checked by user, but why he set the value of "lastChecked" like "let lastChecked = this"?
Sorry for long sentence and poor English.
I'll be happy if someone explain it.
I'll paste the source code below.
source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hold Shift to Check Multiple Checkboxes</title>
</head>
<body>
<style>
html {
font-family: sans-serif;
background: #ffc600;
}
.inbox {
max-width: 400px;
margin: 50px auto;
background: white;
border-radius: 5px;
box-shadow: 10px 10px 0 rgba(5, 5, 5, 0.1);
}
.item {
display: flex;
align-items: center;
border-bottom: 1px solid #F1F1F1;
}
.item:last-child {
border-bottom: 0;
}
input:checked + p {
background: #F9F9F9;
text-decoration: line-through;
}
input[type="checkbox"] {
margin: 20px;
}
p {
margin: 0;
padding: 20px;
transition: background 0.2s;
flex: 1;
font-family: 'helvetica neue';
font-size: 20px;
font-weight: 200;
border-left: 1px solid #D1E2FF;
}
</style>
<div class="inbox">
<div class="item">
<input type="checkbox">
<p>This is an inbox layout.</p>
</div>
<div class="item">
<input type="checkbox">
<p>Check one item</p>
</div>
<div class="item">
<input type="checkbox">
<p>Hold down your Shift key</p>
</div>
<div class="item">
<input type="checkbox">
<p>Check a lower item</p>
</div>
<div class="item">
<input type="checkbox">
<p>Everything in between should also be set to checked</p>
</div>
<div class="item">
<input type="checkbox">
<p>Try do it without any libraries</p>
</div>
<div class="item">
<input type="checkbox">
<p>Just regular JavaScript</p>
</div>
<div class="item">
<input type="checkbox">
<p>Good Luck!</p>
</div>
<div class="item">
<input type="checkbox">
<p>Don't forget to tweet your result!</p>
</div>
</div>
<script>
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
let lastChecked;
function handleCheck(e) {
// Check if they had the shift key down
// AND check that they are checking it
let inBetween = false;
if (e.shiftKey && this.checked) {
// go ahead and do what we please
// loop over every single checkbox
checkboxes.forEach(checkbox => {
console.log(checkbox);
if (checkbox === this || checkbox === lastChecked) {
inBetween = !inBetween;
console.log('Starting to check them in between!');
}
if (inBetween) {
checkbox.checked = true;
}
});
}
lastChecked = this;
}
checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
</script>
</body>
</html>
this refers to the clicked checkbox after calling the function in checkbox.addEventListener. In this case, whenever a checkbox (or you can say it as the element with the selector .inbox input[type="checkbox"]) is clicked, the function handleCheck will be called with this referred to the clicked checkbox.
For more info, please visit What does "this" means? and Why is "this" referred to the checkbox in this case?. They provide more detailed and technical info than my explanation :)
Inside a non arrow event listener, this refers to the event target, i.e. the checkbox that was checked/unchecked.
Since you mention that you are a beginner, I'd prefer that you avoid this as much as possible, & instead use event.target to refer the target element inside an event listener.
this has around major meanings depending on the context, & much more in case you use jQuery/jQueryUI.
I have 3 divs as colors to choose from and 3 blank divs. I want to let the user be able to:
(1) click a colored div and then a blank div, then the blank div is colored as the color the user choose. And the code seems to work.
(2) I want the user to be able to click the colored blank div again and it becomes white. And the code seems to work.
The problem is, if the blank div is colored and the user choose another color and click the colored blank div again, a newer color class will be added to the div, and things become unpredictable. You can open the console and track the messy change of the class of the blank div.
How can I solve this problem? I only want the blank divs to toggle between two classes.
var chosenColor;
function pickColor(arg){
chosenColor=arg.id;
}
function draw(id){
document.getElementById(id).classList.toggle("white");
document.getElementById(id).classList.toggle(chosenColor);
}
.box{
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
.red{background: red}
.blue{background: blue;}
.yellow{background: yellow;}
.white{background: white;}
<html>
<body>
<div class="box red" id="red" onclick="pickColor(this)">1</div>
<div class="box blue" id="blue" onclick="pickColor(this)">2</div>
<div class="box yellow" id="yellow" onclick="pickColor(this)">3</div>
<br><br>
<div class="box white" id="4" onclick="draw(4)">4</div>
<div class="box white" id="5" onclick="draw(5)">5</div>
<div class="box white" id="6" onclick="draw(6)">6</div>
</body>
</html>
Instead of using classes and running into the issue of assigning multiple nested classes or having to use complicated white logic...
I'd use data-* attribute:
var chosenColor;
function pick(el) {
chosenColor = el.dataset.color;
}
function draw(el) {
el.dataset.color = el.dataset.color ? "" : chosenColor;
}
body { background: #eee; }
.box {
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
background: white; /* BY DEFAULT !!! */
}
[data-color=red] { background: red; }
[data-color=blue] { background: blue; }
[data-color=yellow] { background: yellow; }
<div class="box" onclick="pick(this)" data-color="red">1</div>
<div class="box" onclick="pick(this)" data-color="blue">2</div>
<div class="box" onclick="pick(this)" data-color="yellow">3</div>
<br><br>
<div class="box" onclick="draw(this)">4</div>
<div class="box" onclick="draw(this)">5</div>
<div class="box" onclick="draw(this)">6</div>
What the ternary el.dataset.color = el.dataset.color ? "" : chosenColor; does is:
if the element has already any data-color set data-color to "" (nothing)
otherwise set data-color to the preselected chosenColor
Check to see if the element's classname is white. If not, set its class name to white - else, set it to the chosen color. You can put the boxes in a container and use .container > div selector, removing the need to give the boxes the .box class. Also, in a listener, this will refer to the clicked element - there's no need to use getElementById when you already have a reference to the element.
var chosenColor;
function pickColor(arg) {
chosenColor = arg.id;
}
function draw(element, id) {
if (element.className !== 'white') element.className = 'white';
else element.className = chosenColor;
}
.container > div {
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
.red {
background: red
}
.blue {
background: blue;
}
.yellow {
background: yellow;
}
.white {
background: white;
}
<div class="container">
<div class="red" id="red" onclick="pickColor(this)">1</div>
<div class="blue" id="blue" onclick="pickColor(this)">2</div>
<div class="yellow" id="yellow" onclick="pickColor(this)">3</div>
<br><br>
<div class="white" id="4" onclick="draw(this, 4)">4</div>
<div class="white" id="5" onclick="draw(this, 5)">5</div>
<div class="white" id="6" onclick="draw(this, 6)">6</div>
</div>
Answer
See - https://codepen.io/stephanieschellin/pen/xyYxrj/ (commented code)
or ...
var activeColor
function setPickerColor(event) {
activeColor = event.target.dataset.boxColorIs
}
function setThisBoxColor(event) {
let element = event.target
let the_existing_color_of_this_box = element.dataset.boxColorIs
if (the_existing_color_of_this_box == activeColor) {
delete element.dataset.boxColorIs
} else {
element.dataset.boxColorIs = activeColor
}
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
background: white;
}
[data-box-color-is="red"] {
background: red
}
[data-box-color-is="blue"] {
background: blue;
}
[data-box-color-is="yellow"] {
background: yellow;
}
<html>
<body>
<div id="box-1" class="box" data-box-color-is="red" onclick="setPickerColor(event)">1</div>
<div id="box-2" class="box" data-box-color-is="blue" onclick="setPickerColor(event)">2</div>
<div id="box-3" class="box" data-box-color-is="yellow" onclick="setPickerColor(event)">3</div>
<br>
<br>
<div id="box-4" class="box" onclick="setThisBoxColor(event)">4</div>
<div id="box-5" class="box" onclick="setThisBoxColor(event)">5</div>
<div id="box-6" class="box" onclick="setThisBoxColor(event)">6</div>
</body>
</html>
Using data- attributes you are able to decouple the JavaScript functional concerns form the CSS classes. This simplifies your logic but most importantly it allows folks styling your app to work independently from the folks adding JS functionality. This decoupling becomes really important when your team is using BEM or an OOCSS pattern.
Ideally instead of attaching styles to the data- attribute you would maintain the 'state' using data- and have another function that sets the classList based on the data- state. Allowing you to be 100% sure style changes you make will never effect JS functionality (QA will love you). But that's an evolution beyond this post.
With this setup we are not using the id's but I left them in because its an important best practice. Most likely this code would evolve into a component with listeners instead of inline onClick calls. JavaScript selectors should always be attached to id's or data- variables, never classes. Also, the id's should always be there for the QA team to utilize in their scripts. You risk some one changing a class name or removing it to adjust the styles and inadvertently breaking your JS listener.
I switched the arguments to pass the 'event' instead of the 'this' which is the element. Anyone using your JS event functions is going to expect the event object as the first parameter. You can pass 'this' as the second parameter if you like, but event.target will give you the same thing.
One other thing to note is the syntax change between declaring the data- variable and calling it from the JS.
HTML <div data-box-color-is="red">1</div>
JS event.target.dataset.boxColorIs
Regardless of how you format you data- attribute name it will always be parsed into camelCase when referencing it in JS ... data-box_color--IS would still become ... dataset.boxColorIs
Also as an evolution to your code you could remove the global JS var and store the value on the <body> or some other element on the page using data-. This will give you a single source of truth or 'state' that multiple features/components can reference without cluttering the global space.
Further Reading
https://css-tricks.com/bem-101/
https://en.bem.info/
https://philipwalton.com/articles/side-effects-in-css/
https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
https://philipwalton.com/articles/decoupling-html-css-and-javascript/
I am trying to make a page in wordpress (it is built within wordpress custom page tool in admin interface).
What i want is 3 radio buttons. 2 visable 1 hidden.
The hidden one should be auto checked so it displays the correct div. (Maybe not needed when i use z-index in css?)
When a user click one of the checkboxes it should hide the another 2 divs and display the correct div (notice they are on the same place on the page).
For some reson i cant get this to work in wordpress. Or if there would be another way of doing the same way i am open for it as well.
CSS:
#apDiv3 {
position:absolute;
left:405px;
top:53px;
width:485px;
height:434px;
z-index:12;
background-color: #000;
color: #F00;
}
#apDiv10 {
position:absolute;
left:405px;
top:53px;
width:485px;
height:434px;
z-index:11;
background-color: #000;
color: #F00;
}
#apDiv11 {
position:absolute;
left:405px;
top:53px;
width:485px;
height:434px;
z-index:11;
background-color: #000;
color: #F00;
}
<script>
$(document).ready(function(){
$("input[name='payway']").click(function() {
var test = $(this).val();
$(".desc").hide();
$("#"+test).show();
});
});
</script>
HTML/PHP:
<p>
<input type="radio" name="payway" value="apDiv10" />
pay2
<input type="radio" name="payway" value="apDiv3" checked="checked" style="display:none;">
</p>
<p>
<input type="radio" name="payway" value="apDiv11" />
Pay1
</p>
<div id="apDiv3" class="desc">
This is the standard div that should be visable
</div>
<div id="apDiv10" class="desc">
Shows this div when user click on checkbox pay2
</div>
<div id="apDiv11" class="desc">
Shows when user click checkbox pay1
</div>
It seems when i looked at the head.php file there was a script that dident work which made my script not to work at all.
Once i removed the script from the head it worked.
Thank you all!
Can I get help correcting the code below? You can just copy and paste and try it yourself. Onmouseover the popup div appears. If I click X the popup div should close but it doesn't. Only doubleclicking X closes the popup div. Onmouseover it should always display a popup div though.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<style type="text/css">
.container {
display:block;
width:500px;
height:200px;
border:1px solid green;
}
.advert {
float:right;
overflow:hidden;
width:100px;
height:30px;
border:1px solid red;
}
.close {
float:right;
width:20px;
height:28px;
cursor:pointer;
border:1px solid black;
}
</style>
<body>
<div class="container" onmouseover='getad(39);' onmouseout='hidead(39);changeback(39);'>
<div class='advert' id="39" style="display:none;"><div class="close">X</div></div>
<input type="text" value="1" id="ad39" />
</div>
<div class="container" onmouseover='getad(40);' onmouseout='hidead(40);changeback(40);'>
<div class='advert' id="40" style="display:none;"><div class="close">X</div></div>
<input type="text" value="1" id="ad40" />
</div>
<script type="text/javascript">
function getad(number) {
if(document.getElementById('ad'+number).value==1) {
if(document.getElementById(number).style.display == "none") {
document.getElementById(number).style.display = "block";
}
}
}
function hidead(number) {
if(document.getElementById('ad'+number).value==1) {
if(document.getElementById(number).style.display == "block") {
document.getElementById(number).style.display = "none";
}
}
}
function closead(number) {
document.getElementById('ad'+number).value = 0;
if(document.getElementById(number).style.display == "block") {
document.getElementById(number).style.display = "none";
}
}
function changeback(number) {
if(document.getElementById('ad'+number).value==0) {
document.getElementById('ad'+number).value = 1;
}
}
</script>
</body>
</html>
You IDs are wrong:
<div class='advert' id="39" style="display:none;">
<div class='advert' id="40" style="display:none;">
should be:
<div class='advert' id="ad39" style="display:none;">
<div class='advert' id="ad40" style="display:none;">
I tried your code in firefox and it works.
In IE8, it does not work.
This is the main reason why you should never write native Javascript...
Use JQuery or another JS framework.
First, it will make your code cross browser compatible.
Second, only 1 line of code will do what you need to do ;-)
Something like $(#39).hide() or $(#39).show()
The problem isn't that your ad isn't being removed. It's that in order to click the link that triggers the hidead() function, you must also be hovering the mouse cursor over the div that triggers getad() on mouseover.
So what is actually executing if you step through the actions is this.
Click event triggers on the tag for the "X-link"
closead(number) fires and executes it's code.
Mouseout event fires and propagates to the parent
hidead(number) fires and executes.
Mouseover event fires and propagates to the parent
getad(number) fires and executes.
So your event is being unloaded, then immediately reloaded. Perhaps if you could provide some context, we could help you make this workable. I'm not sure under what circumstances you want to load an ad on mouseover, hide it on mouseout, and give the user a close button. That just seems like a lot of loading/unloading/flashing content that's going to annoy your visitor more than simply having a static ad that reloads every X seconds via AJAX or something.
I have this code. I've done this for years now but I'm stumped with the result of this example. The purpose is to make the text box visible and put the contents of the clicked SPAN tag in it.
document.onclick = CaptureClickedElement;
function CaptureClickedElement(e)
{
var EventElement;
if(e==null)
EventElement = event.srcElement;// IE
else
EventElement = e.target;// Firefox
if( EventElement.tagName == "SPAN")
{
document.getElementById("divTXT").style.display="";
document.getElementById("txt").value = document.getElementById("Span1").innerHTML;
alert(document.getElementById("Span1").innerHTML)
}
}
Strangely though, it DOES show the contents but also shows open/close SPAN tags at the end of it. If I alert ther results, the same thing is shown.
Please find the attached screen shot of it here.
Does anyone have an idea of why this is happening?
Thanks!
Here is the HTML (copied from comments by mplungjan)
<style type="text/css">
#divOuter {
width: 100px;
height: 70px;
border: 1px solid blue;
float: left;
}
</style>
<body>
<div>
<form name="frm" method="post" action="">
<div id="divTXT" style="display:none">
<input type="text" id="txt" name="txt" value="" size="30" />
</div>
</form>
</div>
<div id="divOuter">
<span id="Span1">hi, this is a test.<span>
</div>
</body>
Structure problem:
<span id="Span1">hi, this is a test.<span>
Note the absence of a proper close to the span.
Need to use .innerText (for IE) and .text for others.