I'm new to Javascript and I am trying to refresh a specific element (a div) using only Javascript when that div is clicked.
I came across the location.reload() function, but it reloads the entire page which doesn't fit my requirements. Upon clicking the button, I want to display the time taken to click that div.
I'll refrain from sharing the code as it may complicate the question. Essentially, I'm curious if there exists a function similar to location.reload() that I could utilize to target a particular element (div) for refreshing.
Update: Below is the code snippet:
<h1>Test your Reactions!</h1>
<p>Click on the boxes and circles as quickly as you can</p;
<p id="timeNeeded"></p>
<div id="circle"></div>
<script type="text/javascript">
// defining variables
var myColors = ["green", "blue", "red", "purple", "orange", "black"];
var myShape = ["50px", "inherit"];
var startTime, endTime, timeDiff;
var randColor = myColors[Math.floor(Math.random() * myColors.length)];
var randShape = myShape[Math.floor(Math.random() * myShape.length)];
// function definition: Setting the color and shape of the box
function setStyle () {
var circle = document.getElementById("circle");
circle.style.backgroundColor = randColor;
circle.style.borderRadius = randShape;
}
// function definition: Set start time
function start() {
startTime = new Date();
}
// function definition: End time and calculate difference
function end() {
endTime = new Date();
}
// initiate time measurement
start();
// execute styling
setStyle();
// Clicking the button
document.getElementById("circle").onclick = function () {
// reloads the page
// location.reload();
end();
var timeDiff = endTime - startTime;
}
document.getElementById("timeNeeded").innerHTML = "Your reaction: " + timeDiff
</script>
</body>
</html>