-1

In the html code, i put a <p> element with the number. I want that every digit from that number to be in a span element (I must style every digit different).
I put the link with code I wrote and I need some help from you guys. I'm at the situation where I put all digits in a different <span> but further I don't know how concatenate.

Example: I have number 2172 and in the final it should be <span>2</span><span>1</span><span>7</span><span>2</span>

Sorry if I'm not too precise with my problem.

Here is what I tried to do.

Thanks in advance for your help!

J.F.
  • 13,927
  • 9
  • 27
  • 65
Emi Ionescu
  • 1
  • Can you show us what you have tried so far and provide a minimal, reproducable example instead of a link? (put your actual code and any errors you encounter in the post) – iLuvLogix Nov 07 '20 at 10:16
  • let number = document.querySelector("#number"); let numberArr = number.innerHTML.toString().split(""); let stringNr = ""; for(let nr = 0; nr < numberArr.length; nr ++) { let spanNr = document.createElement("span"); spanNr.innerHTML = numberArr[nr]; } This is what i wrote. The problem where i was stuck is i didn't know how to put all elements in a single variable at the final – Emi Ionescu Nov 07 '20 at 10:39
  • `number.innerHTML = number.textContent.replace(/\d/g, "$&");` – Thomas Nov 07 '20 at 18:35

4 Answers4

1

In your example you get the element with document.querySelector("#number"), but I don't see any element with id equal "number", I changed it using querySelector by p tag.

To get the result you can use Array.prototype.reduce():

let number = document.querySelector("p").textContent;
let stringNr = [...number].reduce((result, digit) =>  result+=`<span>${digit}</span>`, "");

console.log(stringNr);
<p>24122</p>
lissettdm
  • 12,267
  • 1
  • 18
  • 39
0

Something like this ?

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    <p id="input">24122</p>
    <div id="output">
    
    </div>
</body>
</html>

JS:

let number = document.querySelector("#input");
let numberArr = number.innerHTML.toString().split("");
let stringNr = "";

for(let nr = 0; nr < numberArr.length; nr ++) {
  let spanNr = document.createElement("span");
  spanNr.innerHTML = numberArr[nr];
   document.querySelector("#output").appendChild(spanNr)
}
Matt Evans
  • 7,113
  • 7
  • 32
  • 64
  • 1
    Note that `.split("")` does not split on user perceived character. See: [How do you get a string to a character array in JavaScript?](/a/34717402) – 3limin4t0r Nov 07 '20 at 14:49
0

The easiest way I think to achieve this is to turn your number into a string and then map over each character. I added some code to show how you can achieve this.

Just replace the container with wherever you want to drop your spans, I added a display block css line to it to show that they were spans but you can remove this to have the number inline.

const container = document.querySelector('.container')

let num = 2172
const numArray = num.toString().split('')

numArray.map(n => {
  let el = document.createElement('span')
  el.innerText = n
  return container.append(el)
})
span {
  display: block;
}
<div class="container"></div>
Jason McFarlane
  • 2,048
  • 3
  • 18
  • 30
0

Try this

let number = document.querySelector("#number");
// You can directly pass the string instead of reading from DOM
const numberArray = Array.from(number.innerHTML)

console.log(numberArray)

for(let item of numberArray) {
    let spanNr = document.createElement("span");
  spanNr.innerHTML = numberArray[item];
 
  number.appendChild(spanNr)
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    <p id="number">24122</p>
    <div id="other">
    </div>
</body>
</html>
Punith K
  • 656
  • 1
  • 9
  • 26