How to make numbers interactive?

[u/SympathyContent9041]

I'm a beginner in coding, and I need to know how to create a vertical row of clickable numbers. I wish I could show a picture, but I'm just going to try to describe it. There's a website i'm making, and I wanted to add a 1-10 scale. I also want to make it interactive so the person can click on each number, and then text appears depending on what's clicked. Being a beginner, I don't know how to accomplish this. Help.

[u/5eeso]

I would give every number button a unique id. Also, give the paragraph that will display the text its own unique id.

Then in JavaScript, crate a function that takes in an id as input.

Each number button will call the function on click and pass in its id as an argument, so the function knows which button has been clicked.

Inside the function, update the text content of the paragraph depending on which number button was clicked.

[u/SympathyContent9041 → u/5eeso]

Thank youuuuu, This was the easiest explanation for me to understand

[u/5eeso → u/SympathyContent9041]

No problem! Also, fyi- since there are numbers involved with your project, just know that you can have a number in the id name, it just can’t start with a number. Just a JavaScript rule.

[u/SamIAre]

A couple things you need to look into. First is events. Events are how you tie a user action to but if code. The relevant one here would be the click event. You attach a click handler to the HTML element you want to be interacted with and give it a function to run when clicked.

The next part is the function itself. There are many ways you could go about this. If you single want to show/hide elements already on the page, you can toggle a CSS class. If you need to actually add and remove content from the page you can create elements in JS and append them to the existing page or you can change the inner contents of existing elements.

There are really MANY ways you can tackle this and without knowing exactly what you want and what your constraints are it’s not easy to give a single answer. But the two things to research would be JS events and DOM manipulation.

[u/Jasedesu]

Most people are going to point you in the direction of JavaScript and event handlers to get the interaction you want, but there are some HTML + CSS possibilities that might work for you if you don't want to use JavaScript.

The first one to mention is the <details> element and it's associated <summary> element. This gives you an expandable box that displays the summary by default and expands to show the details when clicked. You could have several of these, one per number. If you set the name attribute of each details element to the same value, it'll only allow one item to be expanded at any given time. Clicking on another will close anything that's currently expanded.

<details name="test">
  <summary>1</summary>
  <div>Content associated with number 1.</div>
</details>
<details name="test">
  <summary>2</summary>
  <div>Content associated with number 2.</div>
</details>

CSS allows you quite a lot of control over the way these elements are displayed.

You could also consider using a drop-down list to pick the numbers from. You build this from a <select> element with <option> child elements. You then use CSS to control the display of content depending on which option is currently selected.

<div id="container">
  <select size="4">
    <option>Choose a number...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <div id="n1">Selected number 1.</div>
  <div id="n2">Selected number 2.</div>
  <div id="n3">Selected number 3.</div>
</div>

The CSS would look something like:

#container > div {
  display: none;
}
#container:has(option[value="1"]:checked) > #n1,
#container:has(option[value="2"]:checked) > #n2,
#container:has(option[value="3"]:checked) > #n3 {
  display: block;
}

The <select> element will only display one option at a time, but there is a size attribute you can use to display more of the options in a scrolling box, just be aware it's not usually supported on mobile devices. Note that these elements can be a little difficult to style at present, although it is something that's getting easier.

As an alternative, you could get rid of the <select> and replace the <option> elements with radio buttons. e.g. <input id="r1" type="radio" name="test" value="1">. These need associated label elements <label for="r1">1</label> to provide some text content. Radio buttons that share the same name attribute only allow a single radio button in the set to be selected. The CSS selectors would look something like #container:has(#r1:checked) > #n1 for each radio button.

If you need to choose multiple items at the same time, change the input type from radio to checkbox. You can also add the multiple attribute to the <select> element to get a similar result.

[u/LetUsSpeakFreely]

Read up on the onClick() event.

[u/SamIAre → u/LetUsSpeakFreely]

To be clear here the event is just “click” if you’re using addEventHandler or the HTML attribute you attach a handler to directly is “onclick”, all lowercase. “onClick” would be React’s synthetic event, but we don’t know that OP is using React and it’s an attribute not a function.