I want to make a simple quiz. I have this code, but the Javascript part doesn't work. CSS is okay, but when it comes to onclick and onmouseover nothing happens. Here is my code:
<html>
<head>
<style>
body {
background: url(bild.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.a {
position: absolute;
top: 50%;
left: 50%;
margin-top: -130px;
margin-left: -500px;
width: 400px;
height: 50px;
font-size: 30;
color: black;
}
.b {
position: absolute;
top: 50%;
left: 50%;
margin-top: -130px;
margin-left: -20px;
width: 400px;
height: 50px;
font-size: 30;
color: black;
}
.c {
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -500px;
width: 400px;
height: 50px;
font-size: 30;
color: black;
}
.d {
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -20px;
width: 400px;
height: 50px;
font-size: 30;
color: black;
}
</style>
<title>Moseso.de Quiz</title>
</head>
<body>
<script>
function overa() {
document.getElementById("a").style.background="green";
}
function overb() {
document.getElementById("b").style.background="green";
}
function overc() {
document.getElementById("c").style.background="green";
}
function overd() {
document.getElementById("d").style.background="green";
}
function outa() {
document.getElementById("a").style.background="white";
}
function outb() {
document.getElementById("b").style.background="white";
}
function outc() {
document.getElementById("c").style.background="white";
}
function outd() {
document.getElementById("d").style.background="white";
}
function true() {
alert("Richtig!");
}
function false() {
alert("Falsch");
}
</script>
<button class="a" id="a" onmouseover="overa();" onmouseout="outa();" onclick"true();">Antwort A</>
<button class="b" id="b" onmouseover="overb();" onmouseout="outb();" onclick"false();">Antwort B</>
<button class="c" id="c" onmouseover="overc();" onmouseout="outc();" onclick"false();">Antwort C</>
<button class="d" id="d" onmouseover="overd();" onmouseout="outd();" onclick"false();">Antwort D</>
<script>
window.onload = function() {
document.getElementById("a").style.background="#E6E6E6";
document.getElementById("b").style.background="#E6E6E6";
document.getElementById("c").style.background="#E6E6E6";
document.getElementById("d").style.background="#E6E6E6";
}
</script>
</body>
</html>
It would be very nice if someone could answer my question because I tried many times. The script is German BTW :)
You can't use keywords such as true or false for function names. To fix this error, change the true or false method names to something else.
Each button is missing a proper </button> closing tag. Replace the </> with </button>
Also, you are missing the assignment operator for the onclick attribute. Make sure an = appears after onclick and before the string assignment.
Related
I am trying to make a game and I have been trying to get the character button to disappear and reappear on click. I think the if else statements is the best way to do it but I am probably wrong because I am new to javascript. I managed to make it disappear but couldn't make it appear again on click
html:
<body>
<div id="game">
<div id="block"></div>
<button id="character" onclick="myFunction()"></button>
</div>
<script>
function myFunction() {
if (document.getElementById("character").style.display="block" == true) {
document.getElementById("character").style.display="none";
} else {
document.getElementById("character").style.display="block";
}
}
</script>
</body>
</html>
css:
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
}
By applying a display:none to the button ( as your code and the other answers do ) means that once the button is hidden there will be nothing to click a subsequent time to unhide the element. Did you instead intend something akin to the following which sets a visibility property rather than display so that the animation is not reset each time?
document.querySelector('button#character').addEventListener('click', function(e) {
this.parentNode.querySelector('#block').classList.toggle('hidden');
});
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
}
.hidden{visibility:hidden}
div:before{content:attr(id)}
<div id="game">
<div id="block"></div>
<button id="character"></button>
</div>
Alternatively to hide the button itself the opacity property might be more suitable as the button still occupies the space but is merely invisible so can be clicked a second time to reveal itself?
document.querySelector('button#character').addEventListener('click', function(e) {
this.classList.toggle('hidden');
});
* {
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0% {
left: 400px;
}
100% {
left: -50px;
}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
transition:ease-in-out all 250ms;
}
.hidden {
opacity:0
}
div:before {
content: attr(id)
}
<div id="game">
<div id="block"></div>
<button id="character"></button>
</div>
Try this:
<body>
<div id="game">
<div id="block"></div>
<button id="character" onclick="myFunction()"></button>
</div>
<script>
function myFunction() {
if (document.getElementById("character").style.display==="block") {
document.getElementById("character").style.display="none";
} else {
document.getElementById("character").style.display="block";
}
}
</script>
</body>
</html>
What are you going to click in order to show the hidden box,since you have made it disappear ?
I created this snippet below to explain the logic you could follow in order to toggle between visible and hidden black boxes,you definitely need to click something to initiate visibility for the desired elements so i created a button for that.
function showElements(arr) accepts an array of id's you want to bring them back to page.
.black-box {
height: 50px;
width: 50px;
background-color: black;
position: relative;
display: block;
margin:5px;
float: left;
}
<html>
<body>
<div id="game">
<div id="block"></div>
<button onclick="showElements(['character','character2'])">SHOW ELEMENTS</button>
<button class="black-box" id="character" onclick="hideThisElement(this)" style="display:block"></button>
<button class="black-box" id="character2" onclick="hideThisElement(this)" style="display:block"></button>
</div>
<script defer>
function hideThisElement(e){
e.style.display = "none";
}
function showElements(arr){
arr.forEach(el => {
let elId = document.getElementById(el)
if(document.body.contains(elId)){
if(elId.style.display == "none"){
elId.style.display = "block"
}
}
})
}
</script>
</body>
</html>
let x = 0;
document.getElementsByTagName('body')[0].addEventListener('click',function(){
let char = document.getElementById('character')
if(x%2 == 0){
x++;
char.classList.remove('show')
char.classList.add('hide')
}else{
x++
char.classList.remove('hide')
char.classList.add('show')
}
})
.hide{
display:none;
}
.show{
display:block;
}
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
}
<body>
<div id="game">
<div id="block"></div>
<button id="character" class='show'></button>
</div>
</body>
The problem is this: I have an image on a website. During the duration of a click, the image should be replaced to look like a "clicked-state"... Simultaneously a javascript function should be called...
individualy ":active" and "onclick" are working without a problem, but not combined...
Is there a simple solution?
If "//visibility: hidden;" the onclick() works...
function play0() {
alert("TEST");
}
#play0 {
left: 10px;
top: 10px;
height: 100px;
width: 100px;
cursor: pointer;
z-index: 3;
}
#play0:active {
visibility: hidden;
}
#play1 {
left: 10px;
top: 10px;
height: 100px;
width: 100px;
z-index: 2;
}
.animation_items {
position: absolute;
}
<img class="animation_items" id="play0" onclick="play0()" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/SMPTE_Color_Bars.svg/1200px-SMPTE_Color_Bars.svg.png">
<img class="animation_items" id="play1" src="https://i.ytimg.com/vi/ekthcIHDt3I/maxresdefault.jpg">
Perhaps this
function clicked(e) {
alert(e.target.id)
}
document.getElementById("play0").addEventListener("mousedown",clicked)
#play0 {
left: 85px;
top: 160px;
height: 100px;
width: 100px;
cursor: pointer;
z-index: 3;
}
#play0:active {
visibility: hidden;
}
#play1 {
left: 85px;
top: 160px;
height: 100px;
width: 100px;
z-index: 2;
}
.animation_items {
position: absolute;
}
<img class="animation_items" id="play0" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/SMPTE_Color_Bars.svg/1200px-SMPTE_Color_Bars.svg.png">
<img class="animation_items" id="play1" src="https://i.ytimg.com/vi/ekthcIHDt3I/maxresdefault.jpg">
I'm working on my javascript skills by building a slider...however I've become stuck on this issue.
On every click event I want to increment the px value on a translateX.
My best attempt had the slider working however it was just inserting the inline css on top of the previous click.
HTML
<div class="slider">
<button class="slider__button slider__button--left"></button>
<div class="slider__viewport">
<div class="slider__slide"></div>
<div class="slider__slide"></div>
<div class="slider__slide"></div>
</div>
<button class="slider__button slider__button--right"></button>
</div>
CSS
.slider-wrapper {
height:500px;
}
.slider {
position: relative;
max-width: 1200px;
width: 100%;
height: 500px;
background-color: red;
overflow: hidden;
}
.slider__viewport {
display: flex;
width: 100%;
height: 100%;
}
.slider__slide {
flex-shrink: 0;
max-width: 1200px;
width: 100%;
height: 100%;
background-color: yellow;
border: 1px solid red;
float: left;
}
.slider__slide:nth-of-type(3) {
background-color: purple;
}
.slider__slide:nth-of-type(2) {
background-color: green;
}
.slider__button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
z-index: 999;
}
.slider__button--left {
left: 5%;
background-color: blue;
}
.slider__button--right {
right: 5%;
background-color: red;
}
Here is the current code.
const sliderButtonRight = document.querySelector('.slider__button--
right');
const sliderViewport = document.querySelector('.slider__viewport');
const sliders = [...document.querySelectorAll('.slider__slide')];
const sliderWidth = sliders[0].getBoundingClientRect().width;
// The code in question //
sliderButtonRight.addEventListener('click', () => {
sliderViewport.style.transform = `translateX(-${sliderWidth}px)`;
});
// Comment End //
Built-in Javascript only please, no jQuery.
Thank You.
If you hover over the element slowly, the animation works correctly. The green layer overlaps from the left and then, from the top, the yellow layer overlaps the green layer. This overlapping should undo itself when the mouse leaves the element, starting with undoing the yellow overlap and then the green one.
But if the cursor hovers over it too quickly, the animation gets stuck on the yellow overlap until you re-mousover and then mouseout. I've tried adding .stop(false, true) jQuery method before each of the .animate methods, which is what I read has remedied similar problems but this didn't work. I tried it by chaining it right before the .animate function, I tried just about all variations of this, on all of the functions, and also with .stop(true,true);.
Is there a way I can stop the mouseout portion from firing if the mouseover portion doesn't finish before the cursor leaves the element?
$(document).ready(function() {
$('#con').hover(
function() { // handlerIn
$('#crossX').animate({'width': '115px'}, function() {
$('#crossY').animate({'height': '115px'})
})
},
function() { // handlerOut
$('#crossY').animate({'height': '15px'}, function() {
$('#crossX').animate({'width': '15px'})
})
}
)
});
#con {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 130px;
height: 130px;
overflow: hidden;
//background-color: black;
}
#one {
width: 100px;
height: 100px;
background-color: lightgrey;
color:black
}
#crossX {
position: absolute;
top: 15px;
left: 0px;
width: 15px;
height: 100px;
background-color: green;
color: yellow;
}
#crossY {
position: absolute;
top: 0px;
left: 15px;
width: 100px;
height: 15px;
background-color: yellow;
color: white;
}
#black {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: 15px solid black;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="con">
<div id="one"></div>
<div id="crossX"></div>
<div id="crossY"></div>
<div id="black"></div>
</div>
With the following solution it is guaranteed that the "mouse leave part" only runs after the "mouse enter part" is fullfilled and (vice versa).
Additionally the script takes care for the case that on quick user action: "enter > leave > enter" the state remains as if the user haven't done the "quick leave". So actually this should do what you want to achieve (I hope so at least).
var mouseEnter = function() {
// console.log('in');
sPosition = 'in';
if ( !mouseEnterIsDone || !mouseLeaveIsDone ) return mouseEnterIsWaiting = true;
mouseEnterIsDone = false;
$('#crossX').animate({'width':'115px'}, function(){
$.when($('#crossY').animate({'height': '115px'})).then(function(){sanitizeAnimation('enter')})
})
},
mouseLeave = function() {
// console.log('out');
sPosition = 'out';
if ( !mouseEnterIsDone || !mouseLeaveIsDone ) return mouseLeaveIsWaiting = true;
mouseLeaveIsDone = false;
$('#crossY').animate({'height':'15px'}, function(){
$.when($('#crossX').animate({'width': '15px'})).then(function(){sanitizeAnimation('leave')})
})
},
sanitizeAnimation = function( sMode ){
if ( 'enter' == sMode )
mouseEnterIsDone = true;
else
mouseLeaveIsDone = true;
if ( 'in' == sPosition ) {
if ( mouseEnterIsWaiting ) {
mouseEnterIsWaiting = false;
mouseEnter();
}
} else {
if ( mouseLeaveIsWaiting ) {
mouseLeaveIsWaiting = false;
mouseLeave();
}
}
},
mouseEnterIsDone = true,
mouseLeaveIsDone = true,
mouseEnterIsWaiting = false,
mouseLeaveIsWaiting = false,
sPosition = 'out';
$(document).ready(function(){
$('#con').hover(mouseEnter, mouseLeave);
});
body {
padding: 5%;
}
#con {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 130px;
height: 130px;
overflow: hidden;
//background-color: black;
}
#one {
width: 100px;
height: 100px;
background-color: lightgrey;
color:black
}
#crossX {
position: absolute;
top: 15px;
left: 0px;
width: 15px;
height: 100px;
background-color: green;
color: yellow;
}
#crossY {
position: absolute;
top: 0px;
left: 15px;
width: 100px;
height: 15px;
background-color: yellow;
color: white;
}
#black {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: 15px solid black;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="con">
<div id="one"></div>
<div id="crossX"></div>
<div id="crossY"></div>
<div id="black"></div>
</div>
If you need further explanations feel free to leave a comment
$("#con").mouseenter(function() {
$('body').addClass('Hover');
$('#crossX').stop().animate({'width':'115px'},500, function(){
$('#crossY').stop().animate({'height': '115px'},500);
});
});
$("body").mouseenter(function() {
$('body').addClass('Hover');
$('#crossY').stop().animate({'height':'0px'},500,function(){
$('#crossX').stop().animate({'width':'0px'},500);
});
});
#con {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 130px;
height: 130px;
overflow: hidden;
//background-color: black;
}
#one {
width: 100px;
height: 100px;
background-color: lightgrey;
color:black
}
#crossX {
position: absolute;
top: 15px;
left: 0px;
width: 15px;
height: 100px;
background-color: green;
color: yellow;
}
#crossY {
position: absolute;
top: 0px;
left: 15px;
width: 100px;
height: 15px;
background-color: yellow;
color: white;
}
#black {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: 15px solid black;
z-index: 10;
}
body{
background-color:#dcdcdc;
height:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="con">
<div id="one"></div>
<div id="crossX"></div>
<div id="crossY"></div>
<div id="black"></div>
</div>
</body>
<style type = "text/css">
.privacycheck2:hover {
background-color: #E60000;
width: 100px;
left: 860px;
position: relative;
}
.privacycheck2 {
position: relative;
top: 225px;
left: 852px;
font-family: Helvetica Neue;
font-size: 19px;
color: white;
}
.privacycheck1 {
position: relative;
top: 265px;
background-color: #E60000;
width: 24px;
height: 24px;
left: 843px;
border-radius: 50px;
border: 5px #E60000;
}
</style>
<body>
<div class = "privacycheck2:hover">This information is private</div>
<div class = "privacycheck1"></div>
<div class = "privacycheck2">i</div>
</body>
How do I make so if you hover over privacycheck1, it will show a box next to privacycheck1 that says "This information is private"
The code I wrote also makes it when you hover over privacycheck1, it would make privacycheck2 (the "I") would move and I don't want that to happen.
If I understand your question correctly, you could do something like this, although you would have to rewrite your HTML.
.privacycheck1 {
position: relative;
background-color: #E60000;
width: 24px;
height: 24px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
content: 'i';
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
}
<div class="privacycheck1"></div>
If you are using Boot Strap, you can use built in functionality of tool-tip.
Otherwise
Try this :
<body>
<style type = "text/css">
.privacycheck1 {
position: relative;
top: 265px;
background-color: #E60000;
width: 24px;
height: 24px;
left: 843px;
border-radius: 50px;
border: 5px #E60000;
}
.hoverEle {
display:none;
}
.privacycheck1:hover .hoverEle {
display:block;
margin-left: 50px;
}
</style>
<div class = "privacycheck1">
<div class="hoverEle">This information is private</div>
</div>
<body>
You can mix up CSS and javascript to do this.
<html>
<style type = "text/css">
.privacycheck1 {
top: 265px;
background-color: #E60000;
width: 24px;
height: 24px;
left: 843px;
border-radius: 50px;
border: 5px #E60000;
/// set display none
display:none;
}
#privacycheck2_hover{
position: absolute;
margin-left:30px;
display:none; // initially set its display to none
}
</style>
<body>
<div id = 'privacycheck2_hover'>This information is private</div>
<div class = "privacycheck1" onMouseOver="showOn()" onMouseOut="showOff()"></div>
<script>
// when mouse out set css display mode to block
function showOn(){
document.getElementById("privacycheck2_hover").style.display = 'block';
}
// when mouse over set css display mode off
function showOff(){
document.getElementById("privacycheck2_hover").style.display = 'none';
}
</script>
</body>
</html>