Related
I'm crawling the last steps towards a project assigned for one of my classes. Basically, I have to create an implementation on web of the NIM game only using HTML/CCS/JavaScript. Tomorrow's the deadline and I'm almost done, I just have an error on when I want the AI to remove a certain quantity of elements from a pile, it just says that the pile which I'm referring is undefined, even though when i debug the code it appears to have the right info. The game board is generated dynamically based on a width variable(w) and it is created in a function at the start of the game.
I'll snippet the whole project but basically I'm gonna highlight the functions of the creation of the board (working perfectly) and where I'm having some issues on removing elements. Thanks in advance for any possible help, it's my first frontend project experience and I'm tired and clueless on what to do...
game = document.getElementsByClassName("board");
let num = document.querySelector('#board_width');
// Handle number changes
w = num.valueAsNumber;
num.addEventListener('input', function () {
let val = num.valueAsNumber;
w = val;
//console.log(typeof val, val);
});
var msz=2*w-1;
for(let k=1; k<=w; k++){
let row = document.createElement("div");
row.className = "inner_game_piece";
for(let l=1; l<=maxcols; l++){
let elem = document.createElement("div");
elem.className = "game_piece";
elem.onclick = function(){
if(canclk[k]==1){
player_move(k);
row.removeChild(row.lastElementChild);
if(winCheck()) checkmate("P");
}
}
row.appendChild(elem);
}
game[0].appendChild(row);
maxcols+=2;
}
var gm = game[0].getElementsByTagName("div");
for(let i=1; i<gm.length; i++){
if(i==pile){
var rw = gm[i].getElementsByTagName("div");
for(let j=1; j<=qnt; j++){
el[pile]--;
//having some issues here
rw.removeChild(rw.lastElementChild);
}
break;
}
}
if(winCheck()) checkmate("C");
function openLog() {
document.getElementById('logNav').style.display = 'block';
}
function closeLog() {
document.getElementById('logNav').style.display = 'none';
}
function openRules() {
document.getElementById('ruleNav').style.display = 'block';
}
function closeRules() {
document.getElementById('ruleNav').style.display = 'none';
}
var w, difficulty = 4, el = new Array(), game, execnt=0, maxcols, canclk = new Array();
window.addEventListener('load',() => {
game = document.getElementsByClassName("board");
let num = document.querySelector('#board_width');
// Handle number changes
w = num.valueAsNumber;
num.addEventListener('input', function () {
let val = num.valueAsNumber;
w = val;
//console.log(typeof val, val);
});
el[0] = 0; canclk[0] = 0;
if(w>=4) maxcols=1;
else maxcols=5;
for(let i=1; i<=w; i++){
el[i]=maxcols+i*2-2;
canclk[i]=1;
}
if(execnt==0){
var msz=2*w-1;
for(let k=1; k<=w; k++){
let row = document.createElement("div");
row.className = "inner_game_piece";
for(let l=1; l<=maxcols; l++){
let elem = document.createElement("div");
elem.className = "game_piece";
elem.onclick = function(){
if(canclk[k]==1){
player_move(k);
row.removeChild(row.lastElementChild);
if(winCheck()) checkmate("P");
}
}
row.appendChild(elem);
}
game[0].appendChild(row);
maxcols+=2;
}
execnt++;
}
});
function disenabler(pile){
for(let i=1; i<=w; i++){
if(pile==-1) canclk[i]=-1;
if(canclk[i]==2) canclk[i]--;
if(i!=pile && canclk[i]!=0 && pile!=0) canclk[i]=2;
}
}
function player_move(pile) {
if(canclk[pile]==1){
el[pile]--;
if(el[pile]==0) canclk[pile] = 0;
disenabler(pile);
if(winCheck()) checkmate("P");
}
}
function endOfTurn(){
disenabler(-1);
ai_move();
disenabler(0);
}
function winCheck(){
var activelems=0;
for(let i=1; i<=w; i++){activelems += el[i] }
console.log(activelems);
if(activelems==0) return true;
else return false;
}
function ai_move(){
if(winCheck()) checkmate("P");
var chance = document.querySelector('input[name="diff"]:checked').value;
var rn = Math.floor(Math.random() * 10) + 1;
if(rn>chance) random_play();
else winner_move();
}
function isWinning(){
var an = el[i], or = el[i], res;
if(w>1){
for(let i=2; i<=w; i++){
an = (an ^ el[i])==0;
or = (or | el[i+1])==1;
}
res = an^or;
}
else res = (an==0) ^ (or==1);
return res;
}
function random_play(){
var pile = 0, qnt=0;
while(el[pile]==0){
pile = Math.floor(Math.random() * w) + 1;
}
qnt = Math.floor(Math.random() * el[pile]) + 1;
var gm = game[0].getElementsByTagName("div");
for(let i=1; i<gm.length; i++){
if(i==pile){
var rw = gm[i].getElementsByTagName("div");
for(let j=1; j<=qnt; j++){
el[pile]--;
//having some issues here
rw.removeChild(rw.lastElementChild);
}
break;
}
}
if(winCheck()) checkmate("C");
}
function dec2bin(dec) {
var st = ((dec >>> 0).toString(2)).split("").reverse().join("");
console.log(dec, st);
return dec;
}
function winner_move(){
var pile=2, quantity=2, flag=0, counter=0;
var pair = new Array();
var pieces = new Array();
for(let i=1; i<=w; i++){
if(el[i]==0) continue;
pieces = dec2bin(el[i]);
for(let j=0; j<pieces.length; j++){
var v = pieces.charCodeAt(j)-48; var op=0;
if(v==1){
if(pair[j]%2==0){
flag = i;
counter += Math.pow(2,j);
} else{
flag = 0;
counter -= Math.pow(2,j);
}
}
pair[j]++;
}
}
pile=flag; quantity=counter;
if(quantity==0) random_play();
var gm = game[0].getElementsByTagName("div");
for(let i=1; i<gm.length; i++){
if(i==pile){
var rw = gm[i].getElementsByTagName("div");
for(let j=1; j<=quantity; j++){
el[pile]--;
rw.removeChild(rw.lastElementChild);
}
break;
}
}
if(winCheck()) checkmate("C");
}
function checkmate(winner){
if(winner=="P"){
//update win count on leaderboard table
alert("YOU WON, CONGRATULATIONS!!");
}
if(winner=="C"){
alert("Sorry, you lost :(");
}
document.location.reload();
}
body {
background-color: rgba(131, 128, 135, 1);
color: rgba(233, 255, 255, 1);
font-family: Montserrat;
overflow: auto;
}
input[type=number] {
width: 40px;
}
input[type=submit], input[type=number],
button[type=submit], button[type=button] {
background-color: rgba(131, 128, 135, 1);
color: rgba(233, 255, 255, 1);
border: none;
border-radius: 5px;
padding-top: 3px;
padding-bottom: 3px;
}
input[type=submit]:hover, button[type=submit]:hover{
color: rgba(77, 254, 209, 1);
transition: 0.5s;
}
input[type=text], input[type=password]{
background-color: rgba(51, 60, 74, 1);
color: rgba(233, 255, 255, 1);
border: 2px solid rgba(77, 254, 209, 1);
border-radius: 5px;
width: 80%;
padding: 10px 10px;
margin: 12px 0;
box-sizing: border-box;
}
h1 {
padding-left: 2%;
}
h2 {
font-size: 25px;
color: rgba(77, 254, 209, 1);
}
p {
text-align: justify;
padding-left: 3%;
}
ul{
text-align: left;
}
.white_hr {
width: 50%;
align-self: center;
border-top: 5px solid rgba(233, 255, 255, 1);;
border-radius: 5px;
}
.highlight {
color:rgba(77, 254, 209, 1);
font-weight: bold;
font-style: italic;
}
.header {
background-color: rgba(51, 60, 74, 1);
border-radius: 30px;
height: 60px;
width: auto;
position: relative;
}
.header h1 {
font-size: 30px;
float: left;
padding-left: 20px;
position: absolute;
top: 50%;
margin-top: -16px;
}
.header h3 {
color: rgba(77, 254, 209, 1);
float: right;
padding-right: 20px;
}
.header h3:hover {
transition: 0.5s;
color: rgba(233, 255, 255, 1);
cursor: pointer;
}
.container {
text-align: center;
height: 700px;
width: 98%;
display: flex;
justify-content: space-between;
padding-top: 2%;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 30px;
}
.container hr {
width: 80%;
border-top: 5px solid rgba(77, 254, 209, 1);
border-radius: 5px;
}
.container h2:hover {
transition: 0.5s;
color: rgba(233, 255, 255, 1);
cursor: pointer;
}
.container div {
align-items: center;
padding-top: 1%;
}
.inner_game_piece {
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
max-width: 750px;
margin: 0 auto;
flex-wrap: wrap;
}
.game_piece{
width:45px;
height:35px;
border-radius: 50px;
margin:5px;
background-color: rgba(51, 60, 74, 1);
}
.settings, .game, .leaderboard {
display: inline-block;
vertical-align: top;
}
.settings, .leaderboard {
background-color: rgba(51, 60, 74, 1);
border-radius: 20px;
height: auto;
width: 20%;
}
.game {
border: 5px solid rgba(51, 60, 74, 1);
border-radius: 20px;
height: auto;
width: 55%;
}
.small_size {
font-size: 16px;
font-weight: bold;
color: rgba(229, 202, 202, 1);
}
.logNav, .ruleNav {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(131, 128, 135, 1);
background-color: rgba(131, 128, 135, 0.5);
padding: 20% 0 0 0;
}
.log_container, .rule_container{
background-color: rgba(51, 60, 74, 1);
margin: 5% auto 15% auto;
border: none;
border-radius: 10px;
width: 80%;
height: auto;
padding: 2% 2% 2% 0;
}
.closex {
float: right;
color: rgba(77, 254, 209, 1);
font-weight: bold;
font-size: 30px;
cursor: pointer;
}
.closex:hover {
transition: 0.5s;
color: rgba(233, 255, 255, 1);
}
.cancelbtn {
margin: 10px 0;
width: auto;
height: auto;
padding: 80% 10px;
}
.about_title, .rule_title {
font-size: 30px;
text-align: left;
color:rgba(77, 254, 209, 1);
}
.logs {
background-color: rgba(51, 60, 74, 1);
border-radius: 15px;
width: 100%;
height: 150px;
}
.logs h4 {
font-size: 20px;
color: rgba(77, 254, 209, 1);
padding: 2% 2% 0 2%;
}
.logs_box {
background-color:rgba(131, 128, 135, 0.5);
overflow: auto;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width:device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
<title>N I M</title>
</head>
<body>
<div class="header">
<h1>N I M</h1>
<h3 onclick="openLog()">Log in</h3>
</div>
<!-- Login prompt-->
<div id="logNav" class="logNav">
<form>
<div class="log_container">
<div class="log_auth">
<span class="closex" onclick="closeLog()" title="close Login">×</span><br>
<label for="username"><b>Username</b></label><br>
<input type="text" id="username" placeholder="Enter Username" name="username" required><br>
<label for="password"><b>Password</b></label><br>
<input type="password" id="password" placeholder="Enter Password" name="password" required><br>
<button type="submit">Login</button>
<label>
<input type="checkbox" name="guest"><b>Stay as guest</b>
</label><br>
</div>
</div>
</form>
</div>
<div id="main" class="main">
<div class="container">
<!-- Settings Tab -->
<div class="settings">
<h2>Settings</h2>
<hr>
<form>
<div>
<label for="board_width"><b>Board Size</b></label><br>
<input type="number" id="board_width" name="board_width" value="1">
</div>
<hr>
<div>
<h2>Game Mode</h2>
<label for="single_player" class="small_size">SinglePlayer</label>
<input type="radio" id="single_player" name="choose_mode"><br>
<label for="multi_player" class="small_size">MultiPlayer</label>
<input type="radio" id="multi_player" name="choose_mode"><br>
</div>
<hr>
<div>
<h2>Difficulty</h2>
<label for="easy_diff" class="small_size">Easy</label>
<input type="radio" id="easy_diff" value=1 name="diff"><br>
<label for="medium_diff" class="small_size">Medium</label>
<input type="radio" id="medium_diff" value=4 name="diff"><br>
<label for="hard_diff" class="small_size">Hard</label>
<input type="radio" id="hard_diff" value=8 name="diff"><br>
<label for="extreme_diff" class="small_size">Extreme</label>
<input type="radio" id="extreme_diff" value=10 name="diff"><br>
</div>
<hr>
<h2 onclick="openRules()">Rules/About</h2>
<div id="ruleNav" class="ruleNav">
<div class="rule_container">
<span class="closex" onclick="closeRules()" title="close Rules/About">×</span><br>
<h1 class="about_title"><u>What is the NIM game?</u></h1>
<p> -> Nim is a mathematical game of <span class="highlight">strategy</span> in which 2 players take turns
to remove objects from distinct piles. In each turn, the player must choose one pile
and remove at least 1 object from that pile. <b>To win the game you must be the last
player to remove the final set of objects!</b>
</p>
<h1 class="rule_title"><u>What are the Rules?</u></h1>
<ul>
<li>In each turn, the player must remove 1 or more object from an unique horizontal pile;</li>
<li>The player cannot remove 2 or more objects from different piles in the same turn;</li>
<li>Depending on the settings defined:</li>
<li style="list-style: none;"><ul>
<li>The amount of piles can be defined by the user;</li>
<li>The user can also choose who goes first (player 1 or player 2);</li>
<li>Game can be player online <b>(work in progress)</b> or with a robot;</li>
<li>If <b>SinglePlayer</b> was selected, the player can choose the desired difficulty;</li>
</ul></li>
<li>In case of a foul play, the game will not register the move, and will wait for a proper move;</li>
<li>Logs about the state of the game are shown below the game area <b>(for foul plays, winning, and play information)</b>;</li>
</ul>
</div>
</div>
</form>
</div>
<div class="game">
<h2>Game Board</h2>
<hr>
<div class="board"></div>
<script src="script.js"></script>
<hr>
<div class="game_btn">
<button type="reset" onClick="window.location.reload()">New Game / Reset</button>
<button type="button" onClick="endOfTurn()">End Turn</button>
</div>
</div>
<div class="leaderboard">
<h2>Leaderboards</h2>
<hr>
<div class="result_box">
<p>- theres no results registered adfsdfadfasdfsfd</p>
</div>
</div>
</div>
<div class="logs">
<h4>Logs</h4>
<div class="log_box">
<p>lobby: Welcome to NIM!</p>
</div>
</div>
</div>
</body>
</html>
Try to replace
var rw = gm[i].querySelector("div"); <=== changed
for(let j=1; j<=qnt; j++){
el[pile]--;
//having some issues here
rw.removeChild(rw.lastElementChild);
}
break;
getElementsByTagName returns HTMLCollection.
There is no method removeChild in HTMLCollection.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection
Keep your code consistent - naming is 80% of coding (game and msz), 10% is consistency (winCheck and ai_move). The rest is describe in API's documentation ;)
Well done!
I am trying to deploy my first javascript application, which is a Chrome extension.
This simply generates random passwords and stores it with the url of current active tab.
App runs fine on local but after deploying it to Chrome, I got this error:
Uncaught TypeError: Cannot read properties of null (reading 'length')
index.js:65 (anonymous function)
I am a beginner, so any kind of criticism about my code is highly appreciated.
Thank you so much.
function render() {
*line65* **if(passwords.length === 0)** {
document.getElementById("saved-passwords-container").style.display= "none";
} else {
document.getElementById("saved-passwords-container").style.display= "unset";
}
let list = ""
**for (let i = 0; i < passwords.length; i++)** {
list += `<div class="saved-password-line"><span>${passwords[i]}</span></br></br><span class="link"><a target='_blank'href='${links[i]}'>${links[i]}</a></span></div>`
}
document.getElementById("passwords-el").innerHTML = list
}
Here is the full index.js file:
var characters = [];
for (var i=32; i<127; i++)
characters.push(String.fromCharCode(i));
for( var i = 0; i < characters.length; i++){
if ( characters[i] === '<') {
characters.splice(i, 1);
i--;
}
}
for( var i = 0; i < characters.length; i++){
if ( characters[i] === '>') {
characters.splice(i, 1);
i--;
}
}
let pw1El = document.getElementById("pw1-el")
let pw1 = ""
let passwords = []
passwords = JSON.parse(localStorage.getItem("savedPasswords"))
let links = []
links = JSON.parse(localStorage.getItem("savedLinks"))
render()
document.getElementById("char-count-el").value = 20
document.getElementById("gen-btn").addEventListener("click", function() {
var charCount = document.getElementById("char-count-el").value
pw1 = ""
for(let i = 0; i < charCount; i++) {
let randomIndex = Math.floor(Math.random() * characters.length)
pw1 += (characters[randomIndex])
}
pw1El.textContent = pw1
})
document.getElementById("save-btn").addEventListener("click", function() {
passwords.push(pw1El.innerText)
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
links.push(tabs[0].url)
})
localStorage.setItem("savedPasswords", JSON.stringify(passwords))
localStorage.setItem("savedLinks", JSON.stringify(links))
render()
})
function render() {
**if(passwords.length === 0)** {
document.getElementById("saved-passwords-container").style.display= "none";
} else {
document.getElementById("saved-passwords-container").style.display= "unset";
}
let list = ""
**for (let i = 0; i < passwords.length; i++)** {
list += `<div class="saved-password-line"><span>${passwords[i]}</span></br></br><span class="link"><a target='_blank'href='${links[i]}'>${links[i]}</a></span></div>`
}
document.getElementById("passwords-el").innerHTML = list
}
document.getElementById("clear-btn").addEventListener("click", function() {
passwords = []
links = []
localStorage.setItem("savedPasswords", JSON.stringify(passwords))
localStorage.setItem("savedLinks", JSON.stringify(links))
render()
})
document.getElementById("copy-btn").addEventListener("click", function() {
var input = document.getElementById("pw1-el").textContent;
navigator.clipboard.writeText(input);
alert("Copied Text: " + input);
})
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h1>Generate a</br>random password</h1>
<p>Never use an unsecure password again.</p>
<hr>
<div>
<label for="char-count-el">Character Count:</label>
<input type="number" id="char-count-el">
<button id="gen-btn"><span>Generate password</span></button>
</div>
<div>
<label>Your Password:</label>
<div class="pw-container">
<span class="password-line" id="pw1-el">...</span>
<button class="side-btn" id="save-btn">SAVE</button>
<button class="side-btn" id="copy-btn">COPY</button>
</div>
</div>
<div id="saved-passwords-container">
<hr>
<label>Saved Passwords:</label>
<div class="pw-container">
<div id="passwords-el">...</div>
<button class="side-btn" id="clear-btn">CLEAR</button>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
index.css
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #ffffff;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
h1::first-line {
color: white;
}
h1 {
color: #00ffaa;
margin-bottom: 5px;
line-height: 1;
}
label {
font-size: 11px;
display: block;
color: #D5D4D8;
margin-top: 10px;
}
input {
height: 38px;
border-radius: 5px;
border: none;
width: 70px;
padding: 0px 10px;
text-align: center;
background-color: #D5D4D8;
margin-right: 20px;
font-size: 14px;
}
.container {
background: #1F2937;
margin: 0;
padding: 10px 30px 40px;
width: 100%;
min-width: 500px;
box-shadow: 0px 10px 30px 10px #2640644b;
display: flex;
flex-direction: column;
}
.pw-container {
display: flex;
border-radius: 5px;
background-color: #3e4f66;
padding: 10px;
margin-top: 10px;
}
.password-line {
color: #00ffaa;
font-size: 16px;
padding: 5px 10px;
margin-top: 0px;
flex-grow: 1;
flex: 1 1 1;
min-width: 0;
word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;
}
#passwords-el {
padding-right: 30px;
flex-grow: 1;
flex: 1 1 0;
min-width: 0;
word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;
}
.saved-password-line {
color: #D5D4D8;
font-size: 14px;
padding: 10px 15px;
border-bottom: solid 1px #d5d4d814;
border-radius: 5px;
margin-bottom: 10px;
line-height: 0.9;
}
a {
color: #d5d4d872;
text-decoration: underline;
}
.side-btn {
font-size: 12px;
width: 60px;
border: none;
background: none;
color: #D5D4D8;
padding: 5px 10px;
border-radius: 5px;
justify-self: flex-end;
}
.side-btn:hover {
background-color: #ffffff28 ;
}
#gen-btn {
color: #ffffff;
background: #0EBA80;
text-transform: capitalize;
text-align: center;
width: 200px;
height: 40px;
padding: 10px 10px;
border: none;
border-radius: 5px;
margin-bottom: 10px;
margin-top: 10px;
transition: all 0.5s;
box-shadow: 0px 0px 30px 5px #0eba8135
}
#gen-btn:hover {
box-shadow: 0px 0px 30px 10px #0eba8157
}
#gen-btn span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
#gen-btn span:after {
content: '\279c';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
#gen-btn:hover span {
padding-right: 25px;
}
#gen-btn:hover span:after {
opacity: 1;
right: 0;
}
p {
color: #D5D4D8;
margin-top: 0px;
}
hr {
border-width: 1px 0px 0px 0px;
border-color: #95959576;
margin: 15px 0;
}
manifest.json
{
"manifest_version": 3,
"version": "1.0",
"name": "Password Generator",
"action": {
"default_popup": "index.html",
"default_icon": "icon.png"
},
"permissions": [
"tabs"
]
}
I solved it.
I understand that (please correct me if I'm wrong)
if the local storage is empty, it does not return an empty array when parsed.
Apparently, when I do:
passwords = JSON.parse(localStorage.getItem("savedPasswords"))
passwords is no longer an array.
I instead use:
passwords.push(JSON.parse(localStorage.getItem("savedPasswords")))
But that just pushes a nested array inside passwords.
So I added a for loop, and used an if statement to address the initial error:
let locSavedPasswords = localStorage.getItem("savedPasswords")
if(locSavedPasswords !== null) {
for( var i = 0; i < (JSON.parse(locSavedPasswords)).length; i++){
passwords.push(JSON.parse(locSavedPasswords)[i])
}}
Initially, savedPasswords won't exist in localStorage, so localStorage.getItem('savedPasswords') will return null.
You then do JSON.parse(null), which doesn't immediately crash because null is first coerced to a string and becomes 'null' which is then JSON-parsed and turns back to null since the string with contents null is valid JSON.
But you then do .length on it and crash.
The solution is to handle the case where the item is not yet set and handle it like it was a JSON-stringified empty array. You can do so for example using the nullish coalescing operator ??:
let passwords = JSON.parse(localStorage.getItem("savedPasswords") ?? '[]')
Or, you can keep initializing it with [] as you did before but wrap the assignment with the actual value in a condition:
let passwords = []
const json = localStorage.getItem('savedPasswords')
if (json !== null) {
passwords = JSON.parse(json)
}
Personally, what I like to do for structured data in localStorage is something like this, which also handles the case that other things like invalid JSON somehow got stored there (without bricking the application):
let passwords = []
try {
const data = JSON.parse(localStorage.getItem('savedPasswords'))
if (Array.isArray(data)) passwords = data
} catch {}
The reset button makes the grid disappear.
There are two functions that are causing this problem:
reset()
main()
The reason why the grid is disappearing is because of the .empty() method that is attached to the containerGrid and that is inside the main function and because of the $resetButton.on("click", reset), the reset parameter should have () with an argument passed in.
Here is what I tried:
$resetButton.on("click", reset());
This helps with not deleting the grid, but it does not erase the color or gradient blocks anymore.
/*---------------------------
Variables
---------------------------*/
const $containerGrid = $(".containerGrid");
let boxSide = 16;
const $gridLength = $("#gridLength");
const $gradientButton = $("#gradient");
const $randomButton = $("#random");
const $resetButton = $("#reset");
/*-- -------------------------
Buttons & input
---------------------------*/
$gridLength.on("input", gridLength);
$gradientButton.on("click", incrementOpacity);
$randomButton.on("click", getRandomColors);
$resetButton.on("click", reset(16));
/*---------------------------
Corresponding to Event listeners
---------------------------*/
function gridLength() {
if (event.target.value !== 16) {
reset(event.target.value);
}
}
function incrementOpacity() {
$(".cell").off("mouseenter");
$(".cell").mouseenter((event) => {
let opacity = parseFloat(event.target.style.opacity);
if (opacity <= 0.9) {
$(event.target).css({
"opacity": `${opacity + 0.1}`,
"backgroundColor": "#f5f5f5"
});
}
});
}
function setRandomColors() {
return Math.floor((Math.random() * 256));
}
function getRandomColors() {
$(".cell").off("mouseenter");
$(".cell").mouseenter((event) => {
$(event.target).css({
"backgroundColor": `rgb(${setRandomColors()}, ${setRandomColors()}, ${setRandomColors()})`,
"opacity": "1"
})
});
}
function reset(length) {
boxSide = length;
main();
$(".cell").css({
"opacity": "0.1",
"border": "0.5px solid black",
"backgroundColor": "transparent"
});
}
/*-- -------------------------
Creates the Grid
------------------------------*/
function main() {
$($containerGrid).empty();
for (let row = 0; row < boxSide; row++) {
for (let column = 0; column < boxSide; column++) {
createCell();
}
}
$(".cell").css("height", `${(300 / boxSide) - 1}px`);
$(".cell").css("width", `${(300 / boxSide) - 1}px`);
}
function createCell() {
const $cell = $('<div class="cell"></div>');
$cell.css("opacity", "0.1");
$containerGrid.append($cell);
}
main();
* {
margin: 0;
padding: 0;
outline: 0;
font-family: Arial, Helvetica, sans-serif;
color: var(--font-color);
}
:root {
--linear-color1: #e66465;
--linear-color2: #9198e5;
--font-color: #ffffff;
--black-color: #000000;
}
body,
html {
background: linear-gradient(190deg, var(--linear-color1), var(--linear-color2));
height: 100vh;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.title header h1 {
margin: 1em 0em 1em 0;
}
.containerGrid {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
margin-bottom: 3em;
}
.cell {
height: 15px;
width: 15px;
border-radius: 3px;
border: 0.5px solid var(--black-color);
}
.options {
display: flex;
justify-content: space-around;
}
button,
input {
background-color: transparent;
padding: .5em;
border: 1px solid var(--font-color);
border-radius: 3px;
transition: 1s all ease;
}
button:hover,
input:hover {
background-color: var(--font-color);
color: var(--black-color);
}
button:focus,
input:focus {
background-color: var(--font-color);
color: var(--black-color);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ------------------------- How to Play --------------------------->
<div class="container">
<div class="title">
<header>
<h1>Etch a Sketch</h1>
</header>
</div>
<!-- ------------------------- Grid --------------------------->
<section>
<div class="containerGrid">
</div>
<div class="options">
<input type="number" id="gridLength" value="16" min="3" max="64">
<button type="submit" id="gradient">Gradient</button>
<button type="submit" id="random">Random</button>
<button type="reset" id="reset">Reset</button>
</div>
</section>
</div>
Expected: to just erase the the colorful and gradient blocks and the leave the grid size alone
Actual result: The grid does not disappear but it will not erase the colored and gradients blocks anymore. It should just reset everything except for the grid size
You set click event to your reset button the wrong way. The below code should work:
$resetButton.on("click", function() {
reset(16);
});
Full code:
/*---------------------------
Variables
---------------------------*/
const $containerGrid = $(".containerGrid");
let boxSide = 16;
const $gridLength = $("#gridLength");
const $gradientButton = $("#gradient");
const $randomButton = $("#random");
const $resetButton = $("#reset");
/*-- -------------------------
Buttons & input
---------------------------*/
$gridLength.on("input", gridLength);
$gradientButton.on("click", incrementOpacity);
$randomButton.on("click", getRandomColors);
$resetButton.on("click", function() {
reset(16);
});
/*---------------------------
Corresponding to Event listeners
---------------------------*/
function gridLength() {
if (event.target.value !== 16) {
reset(event.target.value);
}
}
function incrementOpacity() {
$(".cell").off("mouseenter");
$(".cell").mouseenter((event) => {
let opacity = parseFloat(event.target.style.opacity);
if (opacity <= 0.9) {
$(event.target).css({
"opacity": `${opacity + 0.1}`,
"backgroundColor": "#f5f5f5"
});
}
});
}
function setRandomColors() {
return Math.floor((Math.random() * 256));
}
function getRandomColors() {
$(".cell").off("mouseenter");
$(".cell").mouseenter((event) => {
$(event.target).css({
"backgroundColor": `rgb(${setRandomColors()}, ${setRandomColors()}, ${setRandomColors()})`,
"opacity": "1"
})
});
}
function reset(length) {
boxSide = length;
main();
$(".cell").css({
"opacity": "0.1",
"border": "0.5px solid black",
"backgroundColor": "transparent"
});
}
/*-- -------------------------
Creates the Grid
------------------------------*/
function main() {
$($containerGrid).empty();
for (let row = 0; row < boxSide; row++) {
for (let column = 0; column < boxSide; column++) {
createCell();
}
}
$(".cell").css("height", `${(300 / boxSide) - 1}px`);
$(".cell").css("width", `${(300 / boxSide) - 1}px`);
}
function createCell() {
const $cell = $('<div class="cell"></div>');
$cell.css("opacity", "0.1");
$containerGrid.append($cell);
}
main();
* {
margin: 0;
padding: 0;
outline: 0;
font-family: Arial, Helvetica, sans-serif;
color: var(--font-color);
}
:root {
--linear-color1: #e66465;
--linear-color2: #9198e5;
--font-color: #ffffff;
--black-color: #000000;
}
body,
html {
background: linear-gradient(190deg, var(--linear-color1), var(--linear-color2));
height: 100vh;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.title header h1 {
margin: 1em 0em 1em 0;
}
.containerGrid {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
margin-bottom: 3em;
}
.cell {
height: 15px;
width: 15px;
border-radius: 3px;
border: 0.5px solid var(--black-color);
}
.options {
display: flex;
justify-content: space-around;
}
button,
input {
background-color: transparent;
padding: .5em;
border: 1px solid var(--font-color);
border-radius: 3px;
transition: 1s all ease;
}
button:hover,
input:hover {
background-color: var(--font-color);
color: var(--black-color);
}
button:focus,
input:focus {
background-color: var(--font-color);
color: var(--black-color);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ------------------------- How to Play --------------------------->
<div class="container">
<div class="title">
<header>
<h1>Etch a Sketch</h1>
</header>
</div>
<!-- ------------------------- Grid --------------------------->
<section>
<div class="containerGrid">
</div>
<div class="options">
<input type="number" id="gridLength" value="16" min="3" max="64">
<button type="submit" id="gradient">Gradient</button>
<button type="submit" id="random">Random</button>
<button type="reset" id="reset">Reset</button>
</div>
</section>
</div>
I have several inputs, which I am copying n times and I am trying to add numeric values from inputs in the array. I marked word "add" because an array may be already filled by other numbers.
I'm trying to apply method from UncleDave's answer here:
JavaScript - Add Value from input box to array
Example:
I have an array:
var exampleArray = [[1, 1.5], [1, 1], [0, 25.5]];
What I have done:
Wrote value 25 in first input. Wrote value 1.5 in the second input.
Create two new inputs.
Wrote value 25.4 in first input. Wrote value 1 in the second input.
Pressed button for adding into an array.
What I am trying to reach:
var exampleArray = [[1, 1.5], [1, 1], [0, 25.5], [25, 1.5], [25.4, 1]];
What I have reached:
"Udefined" in the console log.
Here Is jsfiddle link with my code: https://jsfiddle.net/aectann/k3qwoz0g/12/
updated with snippet (ok, it was not hard at this time, MTCoster, thank you for advice):
var totalInputs;
var myInputs;
var tmpARR = [];
var count = 0,
types = ['t', 'C' /*, 'Q'*/ ],
button = document.getElementById('button');
button.addEventListener("click", createInputs, false);
function createInputs() {
if (!validInput()) {
return;
}
count += 1;
createInput(count);
}
function createInput(count) {
totalInputs = document.getElementsByClassName('myInput').length;
var existingNode = document.getElementsByClassName('myInput')[totalInputs - 1];
types.forEach(function(type) {
var newNode = existingNode.cloneNode();
newNode.value = null;
newNode.id = type + +count;
newNode.placeholder = 'Placeholder ' + type;
newNode.dataset.id = 'id' + count;
appendNode(newNode);
})
}
function appendNode(node) {
document.querySelector('#div').appendChild(node);
}
function validInput() {
myInputs = document.getElementsByClassName('myInput');
var valid = true;
Array.prototype.slice.call(myInputs).forEach(function(input) {
input.classList.remove('error');
if (!input.value) {
input.classList.add('error');
valid = false;
}
});
return valid;
}
function removeError(event) {
event.classList.remove('error');
}
function guardarNumeros() {
boxvalue = document.getElementsByClassName('myInput').value;
tmpARR.push(boxvalue);
console.log(tmpARR);
return false;
}
#title {
font-family: 'Times New Roman', Times, serif;
font-size: 200%;
}
#step {
font-size: 15pt;
clear: both;
}
#step2 {
font-size: 15pt;
clear: both;
}
#step3 {
font-size: 15pt;
clear: both;
}
summary {
background: #009688;
color: #fff;
padding: 5px;
margin-bottom: 3px;
text-align: left;
cursor: pointer;
padding: 5px;
width: 250px;
/*background-color: #4CAF50;*/
}
summary:hover {
background: #008999;
}
.displayBlockInline-Flex {
display: inline-flex;
}
#margin20 {
margin-left: 20px;
vertical-align: middle;
}
#container {
width: auto;
height: auto;
margin: 0 auto;
display: none;
}
a.myButton {
color: #fff;
/* цвет текста */
text-decoration: none;
/* убирать подчёркивание у ссылок */
user-select: none;
/* убирать выделение текста */
background: rgb(212, 75, 56);
/* фон кнопки */
outline: none;
/* убирать контур в Mozilla */
text-align: center;
cursor: pointer;
width: 150px;
padding-bottom: 11px;
}
a.myButton:hover {
background: rgb(232, 95, 76);
}
/* при наведении курсора мышки */
a.myButton:active {
background: rgb(152, 15, 0);
}
/* при нажатии */
.button1 {
/* background-color: #fc0; /* Цвет фона слоя */
/* padding: 5px; /* Поля вокруг текста */
float: left;
/* Обтекание по правому краю */
width: 450px;
/* Ширина слоя */
}
.button2 {
/* background-color: #c0c0c0; /* Цвет фона слоя */
/* padding: 5px; /* Поля вокруг текста */
width: 650px;
/* Ширина слоя */
float: right;
/* Обтекание по правому краю */
}
.clear {
clear: left;
/* Отмена обтекания */
}
.wrapper {
width: 1100px;
margin-left: 20px;
}
/*inputs*/
#div {
text-align: center;
}
.myInput {
height: 40px;
outline: none;
width: auto;
border: 1px solid #999;
border-radius: 4px;
padding: 5px 10px;
margin: 5px;
display: inline-block;
}
.myInput.error {
border: 1px solid red;
}
#action {
margin: 10px 0;
text-align: center;
}
#button {
width: 190px;
height: 40px;
background: #009688;
color: #fff;
font-weight: 600;
font-size: 13px;
border-radius: 4px;
border: none;
/* text-transform: uppercase;*/
outline: none;
cursor: pointer;
}
#button:hover {
background: #008999;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<center>
<input type="text" class="myInput" name="nameAlloy" placeholder="Name">
</center>
<div id="div">
<!--<form onsubmit="return guardarNumeros()">-->
<div id="action">
<button type="button" id="button">Add more inputs</button>
</div>
<input type="number" onkeypress="removeError(this)" class="myInput" data-id="id0" name="value[]" placeholder="Enter value 1">
<input type="number" onkeypress="removeError(this)" class="myInput" data-id="id0" name="value[]" placeholder="Enter value 2">
<div id="action">
<input type="submit" id="button" value="Add to array">
</div>
<!--</form>-->
</div>
The getElementsByClassName() method returns a collection of all
elements in the document with the specified class name, as a NodeList
object.
You can iterate over the collections for all the numeric inputs and update your result. But I would suggest is to create another class for numeric inputs, so you wouldn't need to check for the type of the input and would keep your code generic.
You can try this code and feel free to clear your doubts in the comments.
function guardarNumeros() {
boxvalue = document.getElementsByClassName('myInput');
i = 0;
while (i < boxvalue.length) {
if (boxvalue[i].type == "number") {
if (boxvalue[i+1] && boxvalue[i+1].type == "number") {
tmp = [boxvalue[i].value, boxvalue[i+1].value]
tmpARR.push(tmp);
i+=2;
}
} else {
i++;
}
}
console.log(tmpARR);
return false;
}
The error is in "guardarNumeros" function because getElementsByClassName returns a collection and collection does not have a "value" property.
try this code
function guardarNumeros() {
const inputs = [...document.getElementsByClassName('myInput')];
const inputNumberArr = inputs.filter(x => x.type === 'number');
// tmpARR = [];
for (let i = 0; i < inputNumberArr.length; i++) {
const element = inputNumberArr[i];
if (i % 2 === 0) {
tmpARR.push([element.value]);
} else if (tmpARR[tmpARR.length -1] instanceof Array) {
tmpARR[tmpARR.length -1].push(element.value);
} else {
tmpARR.push([element.value]);
}
}
return false;
}
Pretty new to coding, was just wondering if maybe someone could revise why my .CSS & .JS files are not linking with my HTML?
Here are the lines & this is what it's supposed to look like: https://codepen.io/MatteoV/pen/aGqQBe
I will also be trying to implement this code into Webflow, would anyone know where I can implement these lines?
Thank you guys for the help! :D
jQuery(document).ready(function($) {
// Terms & Discounts
var termArr = [1, 12, 24, 36],
discArr = [0, 0.2, 0.25, 0.3];
// Custom Region Pricing
var prices = {
ca: [0.12, 0.11, 0.1],
az: [0.12, 0.11, 0.1],
va: [0.12, 0.11, 0.1],
sg: [0.2, 0.19, 0.18],
th: [0.2, 0.19, 0.18],
hk: [0.2, 0.19, 0.18]
};
// Exchange Rates & Symbols
var exchange = {
rates: {
USD: 1,
CNY: 6.92,
THB: 35
},
symbol: {
USD: "$",
CNY: "¥",
THB: "฿"
}
};
// Total TB Slider
$("#gb-slider")
.slider({
range: "min",
value: 2000,
step: 500,
max: 10000,
min: 1000,
slide: function(event, ui) {
if (ui.value < 10000) {
$(".contact-us").fadeOut(200, function() {
$(".price-wrap").fadeIn(200);
});
var term = $("#term-slider").slider("option", "value");
$('[name="qty"]').val(ui.value);
$("#total-price .price").text(calcPrice(ui.value, term));
$("#price-per-gb .price").html(pricePerGB(ui.value).toFixed(2));
$('[name="unit_price"]').val(pricePerGB(ui.value).toFixed(2));
} else {
$(".price-wrap").fadeOut(200, function() {
$(".contact-us").fadeIn(200);
});
}
}
})
.each(function() {
var opt = $(this).data().uiSlider.options;
var vals = (opt.max - opt.min) / 1000;
for (var i = 0; i <= vals; i++) {
var el = $('<label class="value-label">' + (i + 1) + "TB</label>").css(
"left",
"calc(" + i / vals * 100 + "% - 10px)"
);
$(this).append(el);
}
});
// Contract Slider
$("#term-slider")
.slider({
range: "min",
max: termArr.length - 1,
slide: function(event, ui) {
var size = $("#gb-slider").slider("option", "value");
$('[name="period"]').val(termArr[ui.value]);
$("#total-price .price").text(calcPrice(size, ui.value));
$('[name="discount_term"]').val(discArr[ui.value]);
}
})
.each(function() {
var opt = $(this).data().uiSlider.options;
var vals = opt.max - opt.min;
for (var i = 0; i <= vals; i++) {
if (i == 0) {
var el = $('<label class="value-label">Monthly</label>').css("left", "0%");
} else {
var el = $(
'<label class="value-label">' + termArr[i] + " Mo.</label>"
).css("left", i / vals * 95 + "%");
}
$(this).append(el);
}
});
// Calcutate Price Per GB
function pricePerGB(value) {
var region = $("#region").val();
if (value <= 2000) {
return prices[region][0];
} else if (value <= 4999) {
return prices[region][1];
} else if (value <= 10000) {
return prices[region][2];
} else {
return false;
}
}
// Calculate Total Price
function calcPrice(size, term) {
var basePrice = size * pricePerGB(size),
discount = basePrice - basePrice * discArr[term],
rate = exchange.rates[$("#currency-select").val()],
price = (discount * rate).toFixed(2);
return price;
}
// Changing Currencies
$("#currency-select, #region").change(function() {
var pricePer = pricePerGB($("#gb-slider").slider("option", "value")).toFixed(
2
);
$(".currency-symbol").text(exchange.symbol[$(this).val()]);
$("#total-price .price").text(
calcPrice(
$("#gb-slider").slider("option", "value"),
$("#term-slider").slider("option", "value")
)
);
$('[name="unit_price"]').val(pricePer);
$("#price-per-gb .price").text(pricePer);
});
// Load price when page does
$("#total-price .price").text(
calcPrice(
$("#gb-slider").slider("option", "value"),
$("#term-slider").slider("option", "value")
)
);
$("#price-per-gb .price").html(
pricePerGB($("#gb-slider").slider("option", "value")).toFixed(2)
);
$('[name="discount_term"]').val(
discArr[$("#term-slider").slider("option", "value")]
);
$("#backup-form").submit(function(e) {
console.log($(this).serialize());
e.preventDefault();
});
});
#import "susy"; Add
#import "breakpoint"; Add
#import "color-schemer"; Add
#import "bourbon#5.*"; Add
#import "neat#2.*"; Add
#import "modularscale#3.*";
*,
*:before,
*:after {
box-sizing: border-box;
}
$yellow: #fdb022;
$yellow-alt: #eea61e;
$grey: #e6e6e6;
html,
body {
font: 16px "Open Sans", Arial, sans-serif;
}
#veeam-sliders {
width: 72em;
margin: 40px auto 0;
h3 {
font-weight: 600;
font-size: 21px;
margin: 0;
}
label {
font: normal 16px/1 "Open Sans", Arial, sans-serif;
text-transform: uppercase;
color: #aaa;
}
button,
.btn {
text-decoration: none;
border: none;
background: $yellow;
color: #fff;
text-transform: uppercase;
font: 700 14px "Open Sans", Arial, sans-serif;
padding: 8px 20px;
border-radius: 3px;
box-shadow: 0 2px 0 0 darken($yellow-alt, 5%);
cursor: pointer;
&:active {
position: relative;
top: 2px;
box-shadow: none;
}
}
.select-wrap {
margin-bottom: 40px;
margin-left: 15px;
display: inline-block;
position: relative;
&:after {
position: absolute;
top: 8px;
right: 10px;
content: "▾";
color: black;
display: block;
z-index: -1;
font-size: 20px;
}
#region,
#currency-select {
padding: 10px 30px 10px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 0;
appearance: none;
position: relative;
background: rgba(255, 255, 255, 0);
color: #222;
&:hover {
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
}
}
.sliders-wrap {
width: 70%;
padding-right: 100px;
float: left;
.slider {
position: relative;
margin: 25px 0;
}
#gb-slider {
margin-bottom: 80px;
}
}
.total-wrap {
width: 30%;
float: left;
button {
margin-top: 40px;
}
.price-wrap {
h3 {
margin-bottom: 10px;
}
#total-price {
font-size: 42px;
line-height: 1.15;
color: #999;
border-bottom: 1px solid $grey;
padding: 0 0 20px;
margin: 0 0 10px;
span {
color: #999;
}
}
#price-per-gb {
color: #222;
font-size: 21px;
clear: both;
.price {
color: #222;
}
}
}
.veeam-provider {
float: right;
}
}
.value-label {
white-space: nowrap;
position: absolute;
top: 25px;
font-size: 15px;
color: #666;
text-transform: none;
font-weight: normal;
}
.contact-us {
margin-top: 25px;
display: none;
h3 {
margin: 0;
line-height: 1;
}
p {
margin: 10px 0 25px;
}
}
/* jQuery UI Slider Theming */
.ui-slider,
.ui-slider-handle,
.ui-slider-range {
border-radius: 500px;
}
.ui-slider {
background: $grey;
border: none;
height: 1em;
}
.ui-slider-handle {
width: 1.8em;
height: 1.8em;
top: -0.4em;
margin-left: -0.7em;
cursor: grab;
background: $yellow-alt;
border-color: $yellow-alt;
}
.ui-slider-range {
background: $yellow;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html lang "en">
<head>
<meta charset="utf-8">
<title>...</title>
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/Crackerzzzz/slider/master/slider.css" />
<script type='text/javascript' src='https://raw.githubusercontent.com/Crackerzzzz/slider/master/Slider.js'></script>
</head>
<body>
<section id="veeam-sliders" class="clearfix">
<form id="backup-form">
<div class="sliders-wrap">
<label>Select Data Center:</label>
<div class="select-wrap">
<select id="region" name="idc">
<option value="ca">Los Angeles, CA</option>
<option value="az">Phoenix, AZ</option>
<option value="va">Ashburn, VA</option>
<option value="sg">Singapore, SG</option>
<option value="th">Bangkok, TH</option>
<option value="hk">Hong Kong, HK</option>
</select>
</div>
<div class="tb-wrap">
<h3>Total GB to Backup</h3>
<div id="gb-slider" class="slider"></div>
<input type="hidden" name="qty" value="2000">
</div>
<div class="contract-wrap">
<h3>Contract Term Length</h3>
<div id="term-slider" class="slider"></div>
<input type="hidden" name="period" value="1">
</div>
</div>
<div class="total-wrap">
<label>Select Currency:</label>
<div class="select-wrap">
<select id="currency-select">
<option value="USD">USD</option>
<option value="CNY">CNY</option>
<option value="THB">THB</option>
</select>
</div>
<div class="price-wrap">
<h3>Total:</h3>
<div id="total-price">
<span class="currency-symbol">$</span><span class="price">000.00</span> /m.
</div>
<div id="price-per-gb">
<span>$</span><span class="price">0.00</span> /GB
<input type="hidden" name="unit_price" value="0.12">
</div>
<button type="submit">Add To Cart</button>
<img class="veeam-provider" src="/wp-content/uploads/veeam-gold-provider_x100.jpg">
</div>
<div class="contact-us">
<h3>Contact Us</h3>
<p>If you're interested in enterprise backup with over 10TB of space, please contact our sales agent for a custom quote based on your needs.</p>
Contact Us
</div>
</div>
<input name="discount_term" type="hidden">
<input name="id" value="621" type="hidden">
<input name="option" value="7688:53546" type="hidden">
</form>
</section>
</body>
</html>
Note: the css is messed up due to not having sass installed.