With a simple click of a button, I aim to have the ability to set a variable to true

I am looking to create a button that changes to true in the Script section. This will allow for a random number to be displayed in the paragraph element.


<!doctype html>
<html>
<button id="button">
random number
</button>
<p id="randomnumber">

</p>



</html>
<script>
var randomNumber;
document.getElementById('button').addEventListener('click', function() {
  randomNumber = (Math.floor(Math.random()*21)+2);
  document.getElementById("randomnumber").innerHTML = randomNumber;
});




</script>

Edit: I am also interested in learning how to assign the random number to a variable so I can utilize it elsewhere.

Answer №1

Hey Jeremy, give this code a shot!

<!doctype html>
<html>
<button id="button">
generate random number
</button>
<p id="randomnumber">

</p>



</html>
<script>
  document.getElementById('button').addEventListener('click', function() {
    document.getElementById("randomnumber").innerHTML = (Math.floor(Math.random() * 21) + 2);
  })
</script>

Answer №2

Perhaps you are seeking out element.addEventListener()

document.getElementById('btn').addEventListener('click', () =>
  document.querySelector("#randomNum").textContent = Math.floor(Math.random() * 21) + 2);
<button id="btn">generate number</button>
<p id="randomNum"></p>

Here are some helpful hints:

  • utilize hyphens in element IDs
  • keep your code neatly formatted
  • employ document.querySelector() rather than document.getEementById()
  • use element.textContent instead of element.innerHTML

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Protractor: Command Line Tips for Providing URLs

When running a Protractor test, the URL is usually specified in the spec file. However, it is possible to also include it directly in the spec.js file: browser.get('www.google.com'); To run the test, the command would be: protractor conf.js I ...

Updating a JSON array by including a new key-value pair using Javascript

Below is a json string that needs to be converted into a new Json Array: Raw Data: [ ["yrxqBHmPkNhZ60_eab97ebf-c2a3-40a5-972a-91597ad9a4ca_99371", "SUCCEEDED", "2023-08-31T21:59:31.325000+05:30", "2023-08-31T22:13:42.165000+05:30"], ["yrxqBHmPkNhZ ...

Aligment issues in columns on Bootstrap 5

I currently have a layout using Bootstrap 5 with multiple rows and columns. My goal is to have the columns aligned within each row, but I am experiencing issues where some borders are not lining up correctly with the columns. .VI-border { border-t ...

How can I prevent a horizontal scrollbar from appearing in HTML when using margin:-4px and what are some possible solutions to this

I am facing an issue with a <div> element that contains a grid row element from semantic UI. Despite setting the width to 100%, there is a small space visible on all sides of the row element. I tried using margin: -4px to eliminate the white space, b ...

query in PHP to display specific data

Seeking guidance for developing a document tracking system using PHP. Struggling with defining the correct title for my project and unable to generate relevant keywords for search queries. The main issue pertains to determining how the system can validat ...

Using AJAX to submit a form and retrieve response data in Javascript

After successfully getting everything to post correctly, I encountered a problem with this script. It keeps loading the content into a new page. Could it be related to the way my php file returns it using "echo(json_encode($return_receipt));"? <s ...

Encountering a SyntaxError while implementing lightweight-charts in NextJS

I'm encountering an issue while trying to integrate the lightweight-charts package into my nextjs project. When attempting to utilize the createChart function, I am receiving a syntax error in my Node.js console. ...\lightweight-charts\dist& ...

Ways to invoke Java function using Javascript (Client-side)

I have a Java Swing application that handles the User Interface, but requires JavaScript files for hardware testing. The application calls a JavaScript engine to execute functions using the `InvokeFunction()` method. Currently, I am utilizing the LabJack ...

Swap out ASP.NET AJAX with jQuery for making ASHX requests

Recently, I have been utilizing the following method to communicate with a Web Proxy for cross domain calls. However, as I am in the process of updating my code and already use jQuery, I am considering dropping ASP AJAX since it is only used for this speci ...

Track user engagement across multiple platforms

Looking for solutions to log system-wide user activity in my Electron app. I want to track mouse-clicks and keystrokes to determine if the user is inactive for a certain period of time, triggering a timer reset within the application. I believe I may nee ...

A large canvas displaying a single optimized image

Hello, I have a large image on the canvas that measures around 10,000 pixels by 10,000 pixels. I am looking for zoom in/out functionality. Can you recommend what technology I should use? Should I consider splitting the image into smaller segments like Go ...

Hide the div element when the url contains the word 'word'

I did some research online, but I couldn't find any information on whether this is doable. I'm currently using IPBoard and after their latest IPS4 update, I'm facing an issue where I can't simply change the homepage anymore. Now, I have ...

Tips for generating numerous sub div tags using jQuery

Is there a way to achieve this output with jQuery? I have working code here: . (See image for reference: https://i.stack.imgur.com/eOXiN.png) When trying to replicate the same using jQuery, I encountered an issue where there is no spacing between two imag ...

Is there a way to modify the FixedTableHeader jQuery plugin to include a fixed first column in addition to the fixed header?

I've been experimenting with a jQuery plugin I found at to create a stylish table with fixed headers, sorting options, and other interesting features. While the plugin is great, I also considered using jqGrid for its impressive capabilities. However, ...

Does anyone know the ins and outs of how the website www.nikebetterworld.com was created?

Hello, I am new to web development and I am interested in creating a page similar to the style of nikebetterworld. Can you point me in the right direction on where to start studying to achieve this design? My impression is that it involves multiple scrol ...

Is it possible to share a Vue.js component by "transferring" it rather than duplicating it?

In my comment system project using Vue.js, I have over 300 comments to manage. Each comment has an admin section that appears when the cursor hovers over it. Duplicating the admin section component for each comment is not ideal as it creates unnecessary l ...

Encountering a malfunction in executing the AngularJS controller file

In the project run with http-server and node.js, the angular controller is unable to connect with index.html. classifieds.js (function() { "use strict"; angular .module("ngClassifieds") .controller("ClassifiedsCtrl", ['$scope', ...

Assistance with Parallax Mouse Movement, Using JQuery, HTML, and CSS

As a newcomer to JQuery, I decided to experiment with creating a parallax background effect using the mousemove function. By utilizing event.pageX to generate a variable for adjusting the background position, I was able to achieve the desired result. Alth ...

Sharing State with a Secure Route in Vue Router (using the script setup method)

Hello everyone, I'm encountering an issue while trying to send a state to the protected routes in vue-router. The error that I faced mentioned "Discarded invalid param(s) "_id", "dish_name", "description", "img" ...

Is there a method to display text on the screen after a countdown has finished?

I am looking for a way to display some text or an image of a cake on the screen once this countdown reaches zero. It's a countdown leading up to my birthday, and I really want it to have that special touch at the end. However, I've been strugglin ...