无法使用 Javascript 将 HTML 按钮元素的标题或值设置为 C 度符号

Question

An ESP8266 is used to dynamically generate a webpage that includes buttons. The Javascript is embedded in c. The Label (aka caption aka value) of the button toggles depending on the mode.

The code that sets the button caption looks like this

document.getElementByID('idUnits').value='°C'

When using chrome's development tools and viewing the generated html it looks like

<input type="button" value="&#176;C" id="idUnits" onclick="dendbuttons(this.id);">

If I hover over the value and right click "edit attribute" it shows °C however if I hover over and "Edit as HTML" it gives me this to edit which includes an unwanted amp;

<input type="button" value="&amp;#176;C" id="idUnits" onclick="dendbuttons(this.id);">

if I remove the amp; while editing (in Chrome's development tool) the button html displays the correct symbol.

Why does amp; get added to the value of the button. How do I encourage it not to do so. I am using a similar technique to dynamically update other html elements with the degree symbol without issue. Only when attempting to do this with the "Button" element do I have issues.

Answer 1

It is because the value property does not parse your HTML. So the htmlEntity (degrees symbol) string will not yet be seen as one. Although when using "Edit as HTML" you'll suddenly parse everything that you've selected as HTML, including your htmlEntity string.

I would recommend you using a button element instead.

<button type="button" id="idUnits" onclick="dendbuttons(this.id);"></button>

And add the htmlEntity with the .innerHTML setter which will parse your string as HTML and thus decodes the symbol and renders it.

document.getElementByID('idUnits').innerHTML = '°C';

Answer 2

You can't use HTML entities inside JS strings as they won't be parsed, but you can use the escape notation to represent them with their Unicode code.

So, how do you get the Unicode code of ° ...? 🤔

One option is to just look it up .

The other one, if you can type or copy-paste the original character from somewhere else, is to get it using String.prototype.charCodeAt() , which returns the UTF-16 code unit (decimal) at the given index, and Number.prototype.toString() , using its radix parameter to convert that decimal to hexadecimal:

'°'.charCodeAt(0); // 176
'°'.charCodeAt(0).toString(16); // "b0"

So, using the \\xXX notation, your code should be:

 document.getElementById('idUnits').value='\\xb0C';

 <input type="button" id="idUnits">

Lastly, rather than using two characters ° + C = °C , you might want to use this other specific character: ℃ .

Same thing here, but using the \\uXXXX notation instead:

'℃'.charCodeAt(0).toString(16); // "2103"

So then the code would look like this:

 // Note the escape notation here is different, as // explained in MDN's documentation: document.getElementById('idUnits').value='\℃';

 <input type="button" id="idUnits">