Replace "." with "," for art dimensions

Question

I have a site with French and English dimensions. For example, I have an image with the dimensions 36 x 46.5 cm. Since it's French, the dot (".") should be a comma (",").

The structure:

<div class="wrapper">
  <span class="custom-field">46.5</span>
</div>

My code:

<script>
var period = document.getElementsByClassName("custom-field");
var comma = period.replace(".",",");
document.getElementsByClassName("custom-field").innerHTML = comma
</script>

The console tells me that period.replace(".",",") is not a function. Please help and thanks in advance.

Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — SMAKSS, Jul 08 '20 at 18:22

score 1 · Answer 1 · answered Jul 08 '20 at 18:20

The period is actually not a string it is an array of HTMLElements, so if you want to use replace method it should be on string. You can access your span data like this:

var period = document.getElementsByClassName("custom-field")[0].innerHTML;
var comma = period.replace(".",",");

if you want to change all of them then you can do like this:

var customFields = document.getElementsByClassName("custom-field");
for (let i = 0; i < customFields.length; i++) {
 customFields[i].innerHTML = customFields[i].innerHTML.replace(".",",") 
};

Adrita Sharma · Answer 2 · 2020-07-08T18:24:18.257

1

Since document.getElementsByClassName results HTMLCollection, you need to loop it through.

Try like this:

var period = document.getElementsByClassName("custom-field");

for (let item of period) {
  item.innerHTML = item.innerHTML.replace(".", ",");
}

<div class="wrapper">
  <span class="custom-field">46.5</span>
</div>

edited Jul 08 '20 at 18:24

answered Jul 08 '20 at 18:20

Adrita Sharma

21,581
10
69
79

Good answers normally explain the problem. – epascarello Jul 08 '20 at 18:22
@epascarello I was trying the code snippet for the first time, so deleted the explanation by mistake – Adrita Sharma Jul 08 '20 at 18:25

Unmitigated · Answer 3 · 2020-07-08T18:21:27.070

1

Use document.querySelector to get the first element matching a selector and use .textContent to get its text.

var el = document.querySelector('.custom-field');
el.textContent = el.textContent.replace(".", ",");

edited Jul 08 '20 at 18:21

answered Jul 08 '20 at 18:20

Unmitigated

76,500
11
62
80

StrayAnt · Answer 4 · 2020-07-08T18:28:48.500

1

Working solution with comments below..

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div class="wrapper">
  <span class="custom-field">46.5</span>
</div>
</body>
<script>
    //Changed to querySelector rather than elementByClassName
    var period = document.querySelector(".custom-field");

    //You forgot to add the inner text of element you needed to replace
    var comma = period.innerHTML.replace(".", ",");
    console.log(comma);
    period.innerHTML = comma
</script>
</html>

edited Jul 08 '20 at 18:28

answered Jul 08 '20 at 18:21

StrayAnt

369
2
7

So you have `period` referenced, but still look it up when you replace the text? – epascarello Jul 08 '20 at 18:22
thanks for pointing that out, I missed that @epascarello – StrayAnt Jul 08 '20 at 18:28
@user42760 No problem, glad I could help – StrayAnt Jul 08 '20 at 18:49

Musab Guma'a · Answer 5 · 2020-07-08T18:30:14.657

0

You need to extract the text from the first element (add [0].innerHTML to the initialization of period.

var period = document.getElementsByClassName("custom-field")[0].innerHTML;
var comma = period.replace(".",",");
document.getElementsByClassName("custom-field")[0].innerHTML = comma;

<div class="wrapper">
  <span class="custom-field">46.5</span>
</div>

edited Jul 08 '20 at 18:30

answered Jul 08 '20 at 18:18

Musab Guma'a

175
2
9

@epascarello It would be worth pointing out why exactly. – Musab Guma'a Jul 08 '20 at 18:21
I tried the above code with ("custom-field")[0].innerHTML. While I got no errors in the console, it didn't change the period to a comma. – user42760 Jul 08 '20 at 18:24
@user42760 Tested a demo successfully in JSFiddle. I'll add a live demo here. – Musab Guma'a Jul 08 '20 at 18:27

score 0 · Answer 6 · answered Jul 08 '20 at 18:23

This is because period is a collection of HTML elements. We need to get the innerHTML of the first([0]) element. Try the following code :-

<script>
var period = document.getElementsByClassName("custom-field")[0].innerHTML;
var comma = period.replace(".",",");
document.getElementsByClassName("custom-field").innerHTML = comma
</script>

score 0 · Answer 7 · answered Jul 08 '20 at 18:28

0

Can you do this.

var elem = document.querySelector(".custom-field");

elem.innerText = el.innerText.replace('.', ',');

<div class="wrapper">
  <span class="custom-field">46.5</span>
</div>

answered Jul 08 '20 at 18:28

GMKHussain

3,342
1
21
19

score 0 · Answer 8 · answered Jul 08 '20 at 19:00

probably you not need to think about replacing. Try to output number values with browser localization.

on javascript, number value can be localized:

<div>
  <h2>Lorem ipsum and so on...</h2>
  your number value is 46.5. 
  Localized presentation is:&nbsp;<span class="localized-number" data-value="46.5"></span>
</div>
<script>
// self executing function here
(function() {
  document.querySelectorAll('.localized-number').forEach((domElement) => {
    domElement.innerText = Number(domElement.getAttribute('data-value')).toLocaleString()
  });
})();
</script>

Replace "." with "," for art dimensions

8 Answers8