Menu
Community /Pin to ProfileBookmark
@cootheadSep 18.2018 — #Hi there redheadstandingby,
this problem can be solved without _JavaScript_. ?
The follow code shows how, and also gives the correct
_JavaScript_ , if you choose to ignore the _CSS_ method...
_coothead_
JavaScript If/Else Statement – unexpected result
Hi there, first time posting so please forgive me if I break etiquette 🙂
I’m playing around with making a circle appear and disappear when it’s clicked – I wrote an If/Else statement to see if I’d got the first step right and I obviously haven’t because something isn’t working! I’m not getting any errors in the console though – it’s just saying No when I’m expecting it to say Yes.
Can anyone tell me what I’ve done wrong? I’m sure it’ll be glaringly obvious to everyone else but I just cannot see it!
Thanks!
[code]
<html>
<head>
<title>Javascript</title>
<style type=”text/css”>
.circle {
height: 100px;
width: 100px;
border-radius: 50%;
border-width: 0px;
display: inline-block;
background-color: purple;
opacity: 1;
}
</style>
</head>
<body>
<div id=”circle1″ class=”circle”></div>
<script type=”text/javascript”>
document.getElementById(“circle1”).onclick = function() {
if (document.getElementById(“circle1”).style.opacity == 1) {
alert(“Yes”);
}
else {
alert(“No”);
}
}
</script>
</body>
</html>
Sign in
to post a comment6 Comments(s) ↴
0
@cootheadSep 18.2018 — #Hi there redheadstandingby,this problem can be solved without _JavaScript_. ?
The follow code shows how, and also gives the correct
_JavaScript_ , if you choose to ignore the _CSS_ method...
``<i>
</i><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
#circle0, #circle1 {
height: 6.25em;
width: 6.25em;
border-radius: 50%;
display: inline-block;
background-color: #800080;
cursor: pointer;
transition: 1s ease-in-out;
}
#cb {
position: absolute;
left: -999em;
}
#circle0 {
background-color: #f00;
}
#cb:checked ~ #circle0 {
opacity: 0.2;
}
.state {
opacity: 0.2;
}
</style>
</head>
<body>
<input type="checkbox" id="cb">
<label id="circle0" for="cb"></label>
<div id="circle1"></div>
<script>
(function( d ) {
'use strict';
var el = d.getElementById( 'circle1' ),
flag = true;
el.addEventListener( 'click',
function() {
if ( flag === true ) {
el.classList.add( 'state' );
flag = false;
}
else {
el.classList.remove( 'state' );
flag = true;
}
}, false );
}( document ));
</script>
</body>
</html><i>
</i>``_coothead_