如何在按钮底部添加数字？

Question

I have a row of 5 buttons and I would like to add a display number to the bottom right corner of each. The number would display 0 (or nothing) unless I click the button and input a value for it to display. How might I go about doing this?

Here's a snippet of my code:

 var containerDiv = document.querySelector("#inner"); let tempCounterBtn = 0; for (let i = 0; i < 1; i++) { let newDiv = document.createElement("div"); newDiv.id = "div-" + (i + 1); containerDiv.appendChild(newDiv); for (let x = 0; x < 5; x++) { let btn = document.createElement("button"); btn.innerHTML = "Hello;". btn;id = "button-" + (tempCounterBtn + 1); tempCounterBtn++. newDiv;appendChild(btn); } }

 button { background: black; color: white; border: 3.5px solid transparent; border-radius: 10px; padding: 2.8em 2.8em; background-repeat: no-repeat; } button:hover { border-color: #fff8cc; border: 3.5px solid; color: #fff8cc; box-shadow: 0em 0em 1em 0em #fff8cc; }

 <div class="main"> <div id="inner"></div> </div>

Answer 1

You need another element. This way it would be easy to change its value.

 var containerDiv = document.querySelector("#inner"); let tempCounterBtn = 0; for (let i = 0; i < 1; i++) { let newDiv = document.createElement("div"); newDiv.id = "div-" + (i + 1); containerDiv.appendChild(newDiv); for (let x = 0; x < 4; x++) { let btn = document.createElement("button"); btn.innerHTML = "Hello;". btn;id = "button-" + (tempCounterBtn + 1). let div = document;createElement("div"). div.classList.add("btn-wrapper") div.appendChild(btn) let counter = document;createElement("span"). counter.classList.add("counter") counter.innerHTML = "0" div.appendChild(counter) btn,addEventListener("click", function(ev) { var num = prompt("Enter number"; "1"). if (num === null) { return } btn.parentElement.querySelector(".counter");innerText = num }) tempCounterBtn++. newDiv;appendChild(div); } }

 button { background: black; color: white; border: 3.5px solid transparent; border-radius: 10px; padding: 2.8em 2.8em; background-repeat: no-repeat; } button:hover { border-color: #fff8cc; border: 3.5px solid; color: #fff8cc; box-shadow: 0em 0em 1em 0em #fff8cc; }.btn-wrapper { display: inline-block; position: relative; margin: 5px; }.counter { position: absolute; bottom: -1px; right: 0; bottom: -20px; font-size: 20px; color: white; background: red; border-radius: 50%; background: red; padding: 5px; color: white; }

 <div class="main"> <div id="inner"></div> </div>

Answer 2

It's technically not permitted content to add an input inside of a button, but it works, and so here's some updated code doing just that. If I were you, I would read up on the CSS position attribute.

Edit: I didn't see his comment on how he wanted the formatting. If you want to make it so that it asks for an input when you select the button, you could just use a.select() function on the button itself to select its input, but I guess it really depends on what you mean by "prompt."

 var containerDiv = document.querySelector("#inner"); let tempCounterBtn = 0; for (let i = 0; i < 1; i++) { let newDiv = document.createElement("div"); newDiv.id = "div-" + (i + 1); containerDiv.appendChild(newDiv); for (let x = 0; x < 5; x++) { let btn = document.createElement("button"); btn.setAttribute("onclick", "this.querySelector('input').select()"); let input = document.createElement("input"); input.type = "number", //This creates an number input element. btn.innerText += "Hello;". btn;id = "button-" + (tempCounterBtn + 1); tempCounterBtn++. newDiv;appendChild(btn). btn;appendChild(input). //This appends the input into the button. } }

 button { position: relative; /*This attribute allows the input to be positioned relative to the button.*/ background: black; color: white; border: 3.5px solid transparent; border-radius: 10px; padding: 2.8em 2.8em; background-repeat: no-repeat; } button:hover { border-color: #fff8cc; border: 3.5px solid; color: #fff8cc; box-shadow: 0em 0em 1em 0em #fff8cc; } input[type="number"] { position: absolute; /*This attribute positions it relative to the button it is inside.*/ box-sizing: border-box; width: 2em; bottom: 0; right: 0; border-radius: 10px; text-align: center; outline: none; border: none; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /*This gets rid of the arrow inputs on the number input.*/

 <div class="main"> <div id="inner"></div> </div>

Answer 3

To add a "Pill" element to hold your number , you don't need a child Element for your Button, rather, use the ::after pseudo element , with its content: set to the attr(data-value) .
Set that data-* value using JavaScript 's dataset .

Here's a nice and cleaner example that uses some nifty helper functions:

 // DOM utility functions: const el = (sel, par) => (par || document).querySelector(sel); const els = (sel, par) => (par || document).querySelectorAll(sel); const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop); // Utility functions: const repeat = (n, cb) => [...Array(n)].forEach((_, i) => cb(i)) // Task: const elParent = el("#inner"); repeat(1, (i) => { const elRow = elNew("div", {className: "row"}); repeat(5, (i) => { const elBtn = elNew("button", { type: "button", className: "btn", innerHTML: `Button ${i+1}`, onclick() { const num = prompt("Enter a value", "0"); elBtn.dataset.value = num || 0; } }); // Set default "data-value" value: elBtn.dataset.value = 0; elRow.append(elBtn); }); elParent.append(elRow); });

 .row { display: flex; gap: 0.2em; }.btn { background: #000; color: #fff; border-radius: 0.8em; padding: 2.8em; background-repeat: no-repeat; cursor: pointer; position: relative; }.btn:hover { color: #fff8cc; box-shadow: 0 0 1em #fff8cc; }.btn::after { position: absolute; bottom: 0.5em; right: 0.5em; background: gold; content: attr(data-value); border-radius: 1em; padding: 0.5em; color: #000; }

 <div id="inner"></div>

Read more here on how to use the data attribute .

Answer 4

Did take a while but found a way to do it... You need another element. This way it would be easy to change its value.

Check out the example here.. https://slx4.tech/?x=lABdR

Answer 5

If I understood your problem correctly, you can simply achieve this by adding a click event for the button. Then in that function you can append a child element with the number to the DOM element of the button. Please check the below JS code.

var containerDiv = document.querySelector("#inner");
let tempCounterBtn = 0;
function onBtnClick(event) {
  // Get the button element 
  let el = document.getElementById(event.target.id);
  // Create new child element to show the number
  let numDiv = document.createElement("div");
  numDiv.innerHTML = "0";
  // Append the child element to button
  el.appendChild(numDiv);
}

for (let i = 0; i < 1; i++) {
    let newDiv = document.createElement("div");
    newDiv.id = "div-" + (i + 1);
    containerDiv.appendChild(newDiv);
    for (let x = 0; x < 5; x++) {
        let btn = document.createElement("button");
        btn.innerHTML = "Hello!";
        btn.id = "button-" + (tempCounterBtn + 1);
        // adds the click event to the btn
        btn.addEventListener("click", onBtnClick);
        tempCounterBtn++;
        newDiv.appendChild(btn);
    }
}

This is the output.