Using JavaScript, generate ten clickable circles on the screen. Each circle should display the number of times it has been clicked in the center when interacted with

Question

Using JavaScript, generate ten clickable circles on the screen. Each circle should display the number of times it has been clicked in the center when interacted with

I am currently working on my JavaScript skills and would like to implement a fun project involving 10 colorful circles. While I can easily create these circles using HTML and CSS, I require assistance with the interactive functionality using JavaScript. My goal is for each circle to display the number of times it has been clicked on. For instance, if I click on the blue circle three times, the number 3 should appear in the center of that circle.

    <style>
        .circle{
            border-radius: 50%;
            width: 40px;
            height: 40px;
            padding: 3px;
            background: blue;
            border: 2px solid black;
            text-align: center;
        }
    </style>
    
</head>
<body> 
    <div class="circle">
        3
    </div>
</body>

javascript html css

Answer 1

Answer №1

To start, you'll need to set up the circle divs as shown below:

<div class="circle" onclick="increment_circle(this);">0</div>

The onclick attribute plays a key role in triggering the script.

You should then create the JavaScript code like this:

<script>
function increment_circle(element) {
  var current = parseInt(element.innerHTML);
  current++;
  element.innerHTML = current;
}
</script>

I hope this explanation is helpful!

function incrementCircle(element) {
  var current = parseInt(element.innerHTML);
  current++;
  element.innerHTML = current;
}

.circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 3px;
  background: blue;
  border: 2px solid black;
  text-align: center;
}

<body>
  <div class="circle" onclick="incrementCircle(this);" style="background-color:blue;">0</div>
  <div class="circle" onclick="incrementCircle(this);" style="background-color:red;">0</div>
  <div class="circle" onclick="incrementCircle(this);" style="background-color:green;">0</div>
  <div class="circle" onclick="incrementCircle(this);" style="background-color:orange;">0</div>
  <div class="circle" onclick="incrementCircle(this);" style="background-color:yellow;">0</div>
  <div class="circle" onclick="incrementCircle(this);" style="background-color:gray;">0</div>
</body>

Answer 2

To start, you'll need to set up the circle divs as shown below:

<div class="circle" onclick="increment_circle(this);">0</div>

The onclick attribute plays a key role in triggering the script.

You should then create the JavaScript code like this:

<script>
function increment_circle(element) {
  var current = parseInt(element.innerHTML);
  current++;
  element.innerHTML = current;
}
</script>

I hope this explanation is helpful!

function incrementCircle(element) {
  var current = parseInt(element.innerHTML);
  current++;
  element.innerHTML = current;
}

.circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 3px;
  background: blue;
  border: 2px solid black;
  text-align: center;
}

<body>
  <div class="circle" onclick="incrementCircle(this);" style="background-color:blue;">0</div>
  <div class="circle" onclick="incrementCircle(this);" style="background-color:red;">0</div>
  <div class="circle" onclick="incrementCircle(this);" style="background-color:green;">0</div>
  <div class="circle" onclick="incrementCircle(this);" style="background-color:orange;">0</div>
  <div class="circle" onclick="incrementCircle(this);" style="background-color:yellow;">0</div>
  <div class="circle" onclick="incrementCircle(this);" style="background-color:gray;">0</div>
</body>

Answer 3

Answer №2

Here is a different approach to solve the problem:

const circles = document.querySelectorAll(".circle");

const increaseNumber = function() {
  let previousNumber = +this.innerHTML || 0;
  this.innerHTML = previousNumber + 1;
};

circles.forEach(circle => {
  circle.addEventListener('click', increaseNumber);
});

.circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 3px;
  background: blue;
  border: 2px solid black;
  text-align: center;
  float: left;
  margin-left: 5px;
}

.red {
  background: red;
}

.gray {
  background: gray;
}

<div class="circle">
  0
</div>

<div class="circle red">
  0
</div>

<div class="circle gray">
  0
</div>

Answer 4

Here is a different approach to solve the problem:

const circles = document.querySelectorAll(".circle");

const increaseNumber = function() {
  let previousNumber = +this.innerHTML || 0;
  this.innerHTML = previousNumber + 1;
};

circles.forEach(circle => {
  circle.addEventListener('click', increaseNumber);
});

.circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 3px;
  background: blue;
  border: 2px solid black;
  text-align: center;
  float: left;
  margin-left: 5px;
}

.red {
  background: red;
}

.gray {
  background: gray;
}

<div class="circle">
  0
</div>

<div class="circle red">
  0
</div>

<div class="circle gray">
  0
</div>

Using JavaScript, generate ten clickable circles on the screen. Each circle should display the number of times it has been clicked in the center when interacted with

Answer №1

Answer №2

Similar questions

First experience with Django Bootstrap Modal Ajax was flawless, but on the second attempt, it was not as successful

Utilizing JS Underscore for combining and organizing arrays with common keys

Determining the margin-left value of a centrally positioned table

Discovering a specific element within a deeply nested JavaScript object

Troubleshooting a problem with the transition of the hamburger menu icon in SC

Is there a bug in NodeJS that causes an error when a return statement is used with a line feed before the string to be returned?

Getting data from a URL using Node.js and Express: A beginner's guide

Encountering invalid JSON response while making an API request

Retrieving pictures by their unique identification number

Troubleshooting problem with Materialize CSS in UI router

Can diverse array elements be divided into separate arrays based on their object type in JavaScript?

Methods for retrieving a file within a nodejs project from another file

What is the reason behind the necessity for a React class component to always invoke super(props) within its constructor function?

Using AngularJS to update text content retrieved from a file and display it in a textarea

The switchView feature is currently malfunctioning and unable to access the content on the next page

What is the best way to handle AJAX responses in an onchange event

Issue with connecting the 'Enter' key to the button - no success

What is the best way to change CSS style for a button when clicked using JavaScript?

When the span element's height is set to 100%, it does not automatically match the height of its parent div

Ways to use jQuery to disable row form elements in the second and third columns