Javascript-форум - Превратить span в текстовое поле кликом и обратно

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Превратить span в текстовое поле кликом и обратно (https://javascript.ru/forum/dom-window/54205-prevratit-span-v-tekstovoe-pole-klikom-i-obratno.html)

alexan0308,var inputs убрано,newInput вынесено за цикл.

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body><span class="dynamic">1</span>
<span class="dynamic">2</span>
<span class="dynamic">3</span>
<span class="dynamic">4</span>
<span class="dynamic">5</span>
<script>
var elems = document.getElementsByClassName("dynamic"),
 newInput = document.createElement("input");
            newInput.type = "text";
            newInput.maxLength = 1;
            newInput.setAttribute("size", 1);
            newInput.style.width = "12px";
            newInput.addEventListener("blur", function() {
            newInput.parentNode.innerHTML = newInput.value ;}
            , false);
for (var i=0; i<elems.length; i++) {
    var el = elems[i];
    el.addEventListener("click", function() {
        if (this.children.length) return;
        newInput.value = this.innerHTML;
        this.innerHTML = "";
        this.appendChild(newInput);
        newInput.focus();
        newInput.select()
		}.bind(el), false);
	};
</script>



</body>

</html>

Теперь со стилями не могу разобраться.

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body><span class="dynamic">1</span>
<span class="dynamic">2</span>
<span class="dynamic">3</span>
<span class="dynamic">4</span>
<span class="dynamic">5</span>
<script>
var elems = document.getElementsByClassName("dynamic"),
 newInput = document.createElement("input");
            newInput.type = "text";
            newInput.maxLength = 1;
            newInput.setAttribute("size", 1);
            newInput.style.width = "12px";
            newInput.addEventListener("blur", function() {
                   newInput.parentNode.innerHTML = newInput.value ;
                   newInput.parentNode.style.fontFamily =  "Arial";
                   newInput.parentNode.style.fontSize =  "20px";
            }, false);
for (var i=0; i<elems.length; i++) {
    var el = elems[i];
    el.addEventListener("click", function() {
        if (this.children.length) return;
        newInput.value = this.innerHTML;
        this.innerHTML = "";
        this.appendChild(newInput);
        newInput.focus();
        newInput.select()
		}.bind(el), false);
	};
</script>



</body>

</html>

Нужно в силу ряда причин указать стиль. Не работают строки

newInput.parentNode.style.fontFamily =  "Arial";
newInput.parentNode.style.fontSize =  "20px";

alexan0308,
поменяйте строки 23 и 25 местами -- или сохраните ссылку на newInput.parentNode

var parent = newInput.parentNode;
                   parent.innerHTML = newInput.value ;
                   parent.style.fontFamily =  "Arial";
                   parent.style.fontSize =  "20px";