I am creating my first simple card game and I would like to create a start menu where at the begining we insert the names of player 1 and player2, I could simply use 2 different inputs but I tried to make it a little bit more complicated and use the same input field for both players.... and I failed... When I insert the first value and made it a var name1 I am struggoling to set the second one. please check the code, the functions is incomplete but I hope it gives an idea of how I tired to do it.
Thanks for attention.
var dice1, dice2;
var btnName = document.querySelector(".btn-enterName");
btnName.addEventListener("click", function() {
var Player1NameInput = document.getElementById("playerNameInput").value;
if(Player1NameInput){
document.getElementById("playerNameInput").value="";
document.getElementById("playerNameInput").placeholder="PLAYER NAME 2";
}
else{
document.getElementById("playerNameInput").placeholder="please select a Name";
}
name1 = Player1NameInput;
});
.playerNameInput {
width:250px;
font-size:20px;
padding:6px;
text-align: center;
top:260px;
left: 50%;
transform: translateX(-50%);
position:absolute;
z-index: 10000;
}
.btn-enterName {
padding:6px;
text-align: center;
top:298px;
left: 50%;
transform: translateX(-50%);
position:absolute;
z-index: 100000;
background-color:#EB4D4D;
color:white;
width:250px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper clearfix">
<input type="text" id="playerNameInput" class="playerNameInput" placeholder="NAME PLAYER 1">
<button id="btn-enterName" class="btn-enterName">ENTER</button>
<script src="app.js"></script>
</body>
</html>
var dice1, dice2;
var name1, name2;
var btnName = document.querySelector(".btn-enterName");
btnName.addEventListener("click",function(){
var PlayerNameInput = document.getElementById("playerNameInput").value;
if(PlayerNameInput){
document.getElementById("playerNameInput").value="";
document.getElementById("playerNameInput").placeholder="PLAYER NAME 2"
} else {
document.getElementById("playerNameInput").placeholder="please select a Name";
}
if(!name1) {
name1 = PlayerNameInput;
} else {
name2 = PlayerNameInput;
console.log({name1,name2});
}
})
.playerNameInput{
width:250px;
font-size:20px;
padding:6px;
text-align: center;
top:260px;
left: 50%;
transform: translateX(-50%);
position:absolute;
z-index: 10000;
}
.btn-enterName{
padding:6px;
text-align: center;
top:298px;
left: 50%;
transform: translateX(-50%);
position:absolute;
z-index: 100000;
background-color:#EB4D4D;
color:white;
width:250px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper clearfix">
<input type="text" id="playerNameInput" class="playerNameInput" placeholder="NAME PLAYER 1">
<button id="btn-enterName" class="btn-enterName">ENTER</button>
<script src="app.js"></script>
</body>
</html>
Hope this helps!
//init
var players = []
var maxNumberOfPlayer = 2
setPlaceHolder(1)
btnName.addEventListener("click",function(){
if(players.length == maxNumberOfPlayer ) {
return
}
players.push(document.getElementById("playerNameInput").value)
setPlaceHolder(players.length)
})
function setPlaceHolder(playerNumber) {
document.getElementById("playerNameInput").placeholder = `PLAYER NAME ${playerNumber}`
}
You can store names like this also.
This is because Javascript uses references to objects. So, when you set Player1NameInput to document.getElementById("playerNameInput").value, a reference will be assigned to variable;
and when you change document.getElementById("playerNameInput").value,Player1NameInput's value will change too. Try to use a string method that does nothing when setting value of Player1NameInput, like this:
var Player1NameInput = document.getElementById("playerNameInput").value.substring(0);
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3 Circle</title>
<style>
body {background: black;}
.container {display: flex;}
.circle {
width: 500px;
height: 500px;
-webkit-border-radius: 250px;
-moz-border-radius: 250px;
border-radius: 250px;
background: white;
}
.active {
background: yellow !important;
color: red;
}
</style>
</head>
<body>
<section class="container">
<button class="circle circle1">Circle1</button>
<button class="circle circle2">Circle2</button>
<button class="circle circle3">Circle3</button>
</section>
<script>
let cir1 = document.querySelector('.circle1')
let cir2 = document.querySelector('.circle2')
let cir3 = document.querySelector('.circle3')
let allCircle = document.querySelectorAll('.circle');
cir1.addEventListener('onClick', onButton1Click);
cir2.addEventListener('onClick', onButton2Click);
cir3.addEventListener('onClick', onButton3Click);
function onButton1Click() {
if (cir1.classList.contains("active")) {
allCircle.classList.remove('active');
} else {
allCircle.classList.remove('active');
cir1.classList.add('active');
}
}
function onButton2Click() {
if (cir2.classList.contains("active")) {
allCircle.classList.remove('active');
} else {
allCircle.classList.remove('active');
cir2.classList.add('active');
}
}
function onButton3Click() {
if (cir3.classList.contains("active")) {
allCircle.classList.remove('active');
} else {
allCircle.classList.remove('active');
cir3.classList.add('active');
}
}
</script>
</body>
</html>
I am trying to make 3 light bulbs represented by circles using HTML & CSS.
So if I turn one light bulb on using the button, the other ones should turn off using the addeventlistener. I can't find ways to make the light bulb turn yellow. Is there anything I am doing wrong? I looked for typos but I can't find any.
A few small things need to changed here.
The event type to be passed to the addEventListener is 'click' rather than 'onClick'.
The variable allCircle returns a list of dom nodes and not a single dom node. So it is essentially a []. Hence properties and methods that are available on a dom node are not accessible on the variable. What you can rather do is write a loop to access each element of the array and then modify their classes one by one
Might also suggest you to put debugger inside your code to see what is happening line by line. This article by Google should help you on using the Chrome dev tools.
This is my first answer on Stack Overflow.
let cir1 = document.querySelector('.circle1')
let cir2 = document.querySelector('.circle2')
let cir3 = document.querySelector('.circle3')
cir1.addEventListener('click', onButton1Click);
cir2.addEventListener('click', onButton2Click);
cir3.addEventListener('click', onButton3Click);
function removeActive() {
cir1.classList.remove('active');
cir2.classList.remove('active');
cir3.classList.remove('active');
}
function onButton1Click() {
removeActive();
cir1.classList.add('active');
}
function onButton2Click() {
removeActive();
cir2.classList.add('active');
}
function onButton3Click() {
removeActive();
cir3.classList.add('active');
}
body {
background: black;
}
.container {
display: flex;
align-items: flex-start;
}
.circle {
width: 100px;
height: 100px;
max-height: 100px;
-webkit-border-radius: 250px;
-moz-border-radius: 250px;
border-radius: 250px;
background: white;
}
.active {
background: yellow !important;
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3 Circle</title>
</head>
<body>
<section class="container">
<button class="circle circle1">Circle1</button>
<button class="circle circle2">Circle2</button>
<button class="circle circle3">Circle3</button>
</section>
</body>
</html>
There seem to be two issues here.
When adding an event listener for a click event, it must be called with click that is to be passed as the first parameter to the listener, but you've added onClick
querySelectorAll returns a HTMLCollection. So classList will not be a valid property on it. You might want to loop through the elements from allCircles to remove the class.
I've modified the listener and corrected the classist related fix for the first button here https://jsfiddle.net/gr33nw1zard/y7f5wnda/
should be click event, not 'onClick'.
cir1.addEventListener('click', onButton1Click);
Created one common function for all 3 buttons. onClick event is not available in plain javascript, it's the click that is the correct keyword here. Also, you have to iterate over allCircle's object or use getElementsByClass. This will work for you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3 Circle</title>
<style>
body {
background: black;
}
.container {
display: flex;
}
.circle {
width: 500px;
height: 500px;
-webkit-border-radius: 250px;
-moz-border-radius: 250px;
border-radius: 250px;
background: white;
}
.active {
background: yellow !important;
color: red;
}
</style>
</head>
<body>
<section class="container">
<button class="circle circle1">Circle1</button>
<button class="circle circle2">Circle2</button>
<button class="circle circle3">Circle3</button>
</section>
<script>
let cir1 = document.querySelector('.circle1')
let cir2 = document.querySelector('.circle2')
let cir3 = document.querySelector('.circle3')
let allCircle = document.querySelectorAll('.circle');
cir1.addEventListener('click', onButtonClick);
cir2.addEventListener('click', onButtonClick);
cir3.addEventListener('click', onButtonClick);
function onButtonClick(e) {
const cir = e.toElement;
if (cir.classList.contains("active")) {
Object.keys(allCircle).map(circle => allCircle[circle].classList.remove('active'));
} else {
Object.keys(allCircle).map(circle => allCircle[circle].classList.remove('active'));
cir.classList.add('active');
}
}
</script>
</body>
</html>
The onClick should be edited to click
I am having trouble with scroll using if statements.
How can I fix it and any helpful tips will be much appreciated.
if (window.scrollY == '100px') {
document.body.style.backgroundColor = "red";
}
div {
position: absolute;
top: 200%;
font-size: 5vw;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div> hi </div>
</body>
</html>
You need to listen on scroll event first.
window.scrollY value is integer.
window.addEventListener("scroll", function() {
if (window.scrollY >= 100) {
document.body.style.backgroundColor = "red";
}
});
div {
position: absolute;
top: 200%;
font-size: 5vw;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div> hi </div>
</body>
</html>
The condition needs to be >= 100, and you need to listen to the scroll event of the window.
Here is a working snippet:
window.addEventListener("scroll", function() {
if (window.scrollY >= 100) {
document.body.style.backgroundColor = "red";
}
});
.container {
position: absolute;
top: 200%;
font-size: 2rem;
}
<div class="container">hi</div>
You can do it as follows -
window.addEventListener("scroll", function() {
if (window.scrollY >= 100) {
document.body.style.backgroundColor = "red";
}else{
document.body.style.backgroundColor = "white";
}
});
*{
transition-duration: 1s;
}
div {
position: absolute;
top: 200%;
font-size: 5vw;
}
<div> hi </div>
In your code, you had written the condition to be window.scrollY == 100px, so it was not working. But once you modify the condition, the code will work as expected.
Also, the else statement or transition effect are not needed, just added them for nice effect.
Want a circle to appear in my browser with the color listed in the sampleClr variable, however, the circle does not show at all. I have tried hard coding a color in place of sampleClr in the function:
gamePiece.style.backgroundColor = sampleClr;
However, it still does not work. I have included my entire code below. Any input as to what I am doing wrong?
let sampleClr = "blue"
const gamePiece = document.querySelector(#gamePiece);
gamePiece.style.backgroundColor = sampleClr;
#gamePiece {
width: 100px;
height: 100px;
border-width: 2px;
border-color: black;
border-radius: 50%;
}
<!doctype html>
<head>
<title>Connect 4</title>
<link href="Test.css" rel="stylesheet">
</head>
<body>
<div id="gamePiece"> </div>
<script src="Test.js"></script>
</body>
</html>
The following will work -
let sampleClr = "blue"
const gamePiece = document.querySelector('#gamePiece');
gamePiece.style.backgroundColor = sampleClr;
#gamePiece {
width: 100px;
height: 100px;
border-width: 2px;
border-color: black;
border-radius: 50%;
}
<!DOCTYPE html>
<head>
<title>Connect 4</title>
<link href="Test.css" rel="stylesheet">
</head>
<body>
<div id="gamePiece"> </div>
<script src="Test.js"></script>
</body>
</html>
It was just a minor error - you had to put the parameter given to querySelector as a string(with quotes) and with that change it works.
You could have also used document.getElementById('gamePiece') since you are selecting an element through its id and directly have a selector specifically for it. It's just an alternative. Both will work the same.
In the query selector, the argument should always be a string. You set the argument to #gamePiece when it had to be '#gamePiece'. This should work:
let sampleClr = "blue"
const gamePiece = document.querySelector('#gamePiece');
gamePiece.style.backgroundColor = sampleClr;
#gamePiece {
width: 100px;
height: 100px;
border-width: 2px;
border-color: black;
border-radius: 50%;
}
<!doctype html>
<head>
<title>Connect 4</title>
<link href="Test.css" rel="stylesheet">
</head>
<body>
<div id="gamePiece"> </div>
<script src="Test.js"></script>
</body>
</html>
https://i.stack.imgur.com/LhvYb.png - This is the image that i want to work with
I made this so far,i made the position to change when i click on the button but i want to when i click the button again the first position to come back.
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div></div>
<button>Press me</button>
<script src="index.js"></script>
</body>
</html>
This is the css
div {
width: 125px;
height: 122px;
background-image: url(picture2.png);
background-repeat: no-repeat;
}
And this is the js
var image = document.getElementsByTagName('div')[0];
var button = document.getElementsByTagName('button')[0];
button.addEventListener('click',switchPic,false);
function switchPic (e){
image.style.backgroundPosition="-150px 0";
}
simply use classList.toggle
const myDiv = document.getElementById('my-div')
, myButton = document.getElementById('my-button')
;
myButton.onclick=()=>
{
myDiv.classList.toggle('right150')
}
div#my-div {
width: 125px;
height: 122px;
background-image: url(https://i.stack.imgur.com/LhvYb.png);
background-repeat: no-repeat;
}
div#my-div.right150 {
background-position-x: -150px;
}
<div id="my-div"></div>
<button id="my-button">Press me</button>
or, with an addEventListener...
const myDiv = document.getElementById('my-div')
, myButton = document.getElementById('my-button')
;
myButton.addEventListener('click',switchPic)
function switchPic (e)
{
myDiv.classList.toggle('right150')
}
currently working on a simple script that displays a nightime background if it's a certain time in the day and a daytime image if it's a different time of day. I am using jQuery to achieve this by adding a class if one is true, and adding a class if the other is true. Issue is... the code simply won't function properly. Curious about any possible solutions... thanks!
$(document).ready(function() {
var currentTime = new Date().getHours();
if (7 <= currentTime && currentTime < 20) {
$("document.body").addClass("day");
$("document.body").removeClass("night");
} else {
$("document.body").addClass("night");
$("document.body").removeClass("day");
}
});
.night {
background-image: url('images/night.jpg');
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
}
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
</head>
<body>
<div class="app-wrapper">
<p id="date"></p>
</div>
</body>
Change:-
$("document.body").addClass("day");
$("document.body").removeClass("night");
to:-
$("body").addClass("day").removeClass("night");
(same for second-one too)
Working demo example:-
$(document).ready(function() {
var currentTime = new Date().getHours();
if (7 <= currentTime && currentTime < 20) {
$("body").addClass("day").removeClass("night");
} else {
$("body").addClass("night").removeClass("day");
}
});
.night {
background-color: black;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
}
.day {
background-color: grey;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>APP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-
hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app-wrapper">
<p id="date"></p>
</div>
</body>
</html>
You need to replace $("document.body") with $("body")