Looking to incorporate multiple divs that will vanish upon being clicked, while also increasing the score by 1 through javascript. Any suggestions on how to accomplish this?
Looking to incorporate multiple divs that will vanish upon being clicked, while also increasing the score by 1 through javascript. Any suggestions on how to accomplish this?
Greetings Subhrajeet,
We appreciate your question and believe that asking is the key to learning. However, we recommend attempting to code before seeking assistance so that we can better troubleshoot any issues you encounter.
I've formulated a solution based on your query. I trust this will aid you in your quest for knowledge. Keep coding and exploring; it's a thrilling journey!
function remove() {
this.parentNode.parentNode.removeChild(this.parentNode);
let currScore = parseInt(document.getElementById("score").innerHTML)+1;
if (currScore == 6) {
document.getElementById("score").innerHTML = "You Won!!!";
} else {
document.getElementById("score").innerHTML = currScore;
}
}
let list = document.querySelectorAll('div');
let button = document.querySelectorAll('span');
for (var i = 0, len = list.length; i < len; i++) {
button[i].addEventListener('click', remove, false);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1 class="text-info text-uppercase">Wacky Box Clicking Game</h1>
<p>This game involves clicking on the happy face to make it disappear. Reach six clicks to emerge victorious! 🎉</p>
<h3 class="text-muted">CURRENT SCORE: <b class="text-danger" id="score">0</b></h3>
<section class="row">
<div class="col-sm-2 boxie display-2 text-info"><span> 😊</span></div>
<div class="col-sm-2 boxie display-2 text-success"><span> 😊</span></div>
<div class="col-sm-2 boxie display-2 text-danger"><span> 😊</span></div>
<div class="col-sm-2 boxie display-2 text-warning"><span> 😊</span></div>
<div class="col-sm-2 boxie display-2 text-primary"><span> 😊</span></div>
<div class="col-sm-2 boxie display-2 text-info"><span> 😊</span></div>
<section>
</body>
</html>My bootstrap navbar HTML code is as follows: <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: rgb(50, 50, 50)"> <button class="navbar-toggler" type="button" data-toggle="col ...
I am encountering an issue while attempting to retrieve a request using postman for a JSON string in order to apply a JSON patch. Unfortunately, I am facing difficulties in converting the string to JSON once the data is posted through a variable. Each time ...
Are you familiar with how to include an operator in an object (rather than the entire class)? When it comes to a method, I know you can achieve that by: my_object.new_function = function(){return 1}; Then invoking my_object.new_function() will output ...
Currently, my codebase is built with redux, redux-saga, and react using plain Javascript. We are now considering incorporating Typescript into the project. Some questions arise: Can plain Javascript files coexist with tsx code? I believe it's possibl ...
Imagine a scenario where there is a page displaying various items on a table that changes in both order and quantity randomly. The task at hand is to locate a specific item labeled "Itemx" by its text, extract its XPath or CSS, and then use it in another ...
Is there a way to change the background after a certain amount of time? It seems to work fine if the background color is just a solid color, but when it's a gradient as shown in the code below, the solution doesn't seem to work. Any suggestions f ...
Can anyone help me with this issue? I'm having trouble with my table where the headings are repeating for every row and the table is stuck on the far right side. How can I center the table instead? Codesandbox: https://codesandbox.io/s/xenodochial-fo ...
Currently, I'm working on implementing a hide/show function for comments using JavaScript. Fortunately, I was able to find a helpful solution here (thanks to "PiggyPlex" for providing the solution on How can I hide/show a div when a button is clicked? ...
There are some classic image png files located in app/assets/images/... However, in production, after running rake assets:precompile The images do not appear! Upon inspecting the CSS source code, I noticed that .logo { background-image: url("/ass ...
In my current project using React JS, I am tasked with creating a notifications component that will display account-related activities. The notifications need to be sorted into read and unread categories. My main question is how should I manage the read a ...
Context In the process of developing a React-Redux application, I am faced with the task of handling axios calls to an external API over which I have no control. The specific axios request in question is executed by a function called "getData". This reque ...
I am looking to consolidate a variety of REST APIs into a single, easy-to-use API. My plan is to develop a straightforward nodejs/express API that will handle the individual calls asynchronously and then aggregate all the results together at once. The Jav ...
I have set up a basic router in my code and initialized it. Issue: I encountered an unexpected behavior when visiting the URL http://localhost/backbone1/#photos/5. Despite expecting an output from console.log() in the JavaScript console, nothing appears. ...
I am currently working on an app that allows users to easily check the local weather and temperature in either celsius or fahrenheit. However, I've encountered a problem when trying to switch between the two unit types by simply clicking on the temper ...
As I was reviewing my CSS code, I noticed that the h1 tag is defined like this: h1 { .... } Unlike everything else in my code, which either has an id "#" or a "." class preceding it. This made me wonder why header tags don't require this. Could it b ...
In the process of developing a MERN full stack application, I encountered a scenario where the frontend initiates an api call to "/createDeckOfCards" on my NodeJS backend. The main objective is to generate a new deck of cards upon clicking a button and the ...
I'm facing an issue with using $resource for making a post request in my app. Here is the code snippet from my Angular module: angular.module('myApp').factory('Product', ['$resource', function ($resource) { ...
I am currently working on building a Grid using material UI and reactJs. I found the guidelines on this link https://mui.com/system/react-grid/. However, there seems to be an issue with creating 5 columns in the grid. I attempted to create a custom grid ...
I have successfully implemented a JavaScript function that displays picture previews and uploads them automatically on the onchange event. Now, I am looking to add a progress bar to show the upload status. However, all the solutions I found online are rel ...
I am currently working on using the kimono web scraper in conjunction with Firebase to obtain data stored as JSON. To convert the JSON to XML, I am utilizing a JavaScript library which allows me to create a variable from the JSON file (an example is shown ...