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>Take a look at this piece of code: export class Character { constructor(private id: number, private name: string) {} } @Component({ selector: 'my-app', template: '<h1>{{title}}</h1><h2>{{character.name}} detai ...
I recently came across a helpful post on Stack Overflow about creating an Enter keypress directive. After following the instructions, here is my JavaScript code that replicates the functionality: JavaScript var app = angular.module('myApp', [] ...
Within my ui-router state configuration, I have the following setup: Parent state $stateProvider .state('profile',{ url: '/profile', views: { 'contentFullRow': { ...
I've been trying to solve a problem for hours now, but I can't seem to figure out how to retrieve a value in php and pass it back to js. Here is the input field in question: <input type="text" class="form-control input-lg" name="nr_ref" id=" ...
I am faced with a challenge involving a table that contains checkboxes in the first column. When a checkbox is checked, it triggers an AJAX script that updates a PHP session variable with the selected values. The functionality is currently operational, but ...
I've been working with a button component that utilizes the Tailwindcss framework and css modules for some extra styling. It currently looks like this, incorporating template literal to integrate the red background styling. CSS Module: .red { back ...
In my Next.js code, I am fetching a document from MongoDB using a unique slug. Here is the code snippet: export async function getStaticProps(context) { const postSlug = context.params.postPage; const { db } = await connectToDatabase(); const posts ...
My jquery autocomplete menu is functioning properly, displaying a list of books with author, title, and book image. I am now looking to enhance it by allowing users to click on the book image and then have the book title posted to an express app.post metho ...
I am encountering an issue with a child component, where each row in an object is rendered inside a div with a specific slot. I need to pass data from the parent for each of these elements. I've been attempting to iterate through every element of the ...
Despite trying various tools for 6 hours, I have been unable to find one that can properly interpret wikitext like the example below: '<center>Welcome to the world's foremost open content<br><big><big><big>'&ap ...
I have a PHP file that interacts with a database to update the HTML content. There is a button on the page labeled "Export As PDF". I attempted to convert the page to a PDF using HTML2FPDF, but encountered this error message: FPDF error: Unable to create ...
After successful JSON Ajax response, a treeview structure with checkboxes is displayed. I need to capture the number of checkboxes checked when the save button is clicked. @model MedeilMVC_CLOUD.Models.UserView <script type="text/javascript"> ...
Having trouble with my Browserify Angular configuration file, specifically when using require() to load HTML templates. I attempted to use stringify or browserify-ng-html2js in the transform() function, but it resulted in multiple transform calls in my gul ...
I am in need of assistance with AngularJS. How can I re-initialize a variable in scope after using emit? Here is an example code snippet: $scope.uiConfig = {title: "example"}; $scope.$emit('myCustomCalendar', 'Data to send'); $scop ...
We are facing a challenge with two separate codebases that have different localization styles. One codebase uses yaml, while the other uses JSON. Currently, we are working on transitioning to the JSON-based codebase. However, with 20k yaml strings and sup ...
I am currently learning CSS and HTML, as I'm working on a project for my final school assignment. My goal is to position the text "Welcome" absolutely within a specific div that I've created. However, despite multiple attempts, I can't seem ...
I'm struggling with a dilemma involving two DIVs. I am looking to have two DIVs positioned in the exact same spot on the page and toggle between them. When one div disappears, the other should appear using jQuery toggle(). The challenge lies in havi ...
To put it simply, my question involves a table display where student numbers (USN) are concatenated in groups and the entire row is displayed using a foreach loop. Row 1: Subject 1 - 22/07/2015 - 08:00 - 1XX10XX086, 1XX10XX087, 1XX09XX088 Row 2: Subject ...
I have encountered a problem with the Dropdown pop-up feature. Specifically, when I click on the "Add New" option in the Dropdown, the pop-up window fails to open. Here is the code for the Dropdown: echo form_dropdown('Birth_Certificate_Storage_id[& ...
Here is the array I am working with: var data = [ {"firstname":"A","middlename":"B","lastname":"C"}, {"firstname":"L","middlename":"M","lastname":"N"}, {"firstname":"X","middlename":"Y","lastname":"Z"} ]; I need to update the values for all keys - firstn ...