想實現(xiàn)js每點(diǎn)擊一次按鈕，文本節(jié)點(diǎn)數(shù)字增加一卻出現(xiàn)了NAN,怎么回事？

想實現(xiàn)js每次點(diǎn)擊，不斷增加一個節(jié)點(diǎn)，節(jié)點(diǎn)的文本節(jié)點(diǎn)的數(shù)字比上一個節(jié)點(diǎn)的文本節(jié)點(diǎn)的數(shù)字增加一，但是怎么出現(xiàn)增加為NAN,已經(jīng)用parseInt將字符串轉(zhuǎn)換為數(shù)字了。可能語言描述不清晰，具體的的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
        *{
            margin: 0;
            padding: 0;
        } 
    </style>
</head>
<body>
    <ul class="oUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <input class="oBtn" type="button" value="按鈕">
</body>
    <script>
    var oBtn = document.getElementsByTagName("input")[0];
        oBtn.onclick = append;
        function append(){
            var oUl = document.getElementsByTagName("ul")[0];
            var cRlitextnode = parseInt(oUl.lastChild.textNode);
            cRlitextnode++;
            console.log(cRlitextnode);
            var li = document.createElement("li"); 
            var textNode = document.createTextNode(cRlitextnode);
           
            oUl.appendChild(li);
            li.appendChild(textNode);
        }
    </script>
</html>

希望大家能夠幫忙解答，謝謝|

回答

編輯回答

背叛者

// 1. `Node.textNode`沒有這個方法吧？？？你要獲取節(jié)點(diǎn)里面的值還是老老實實用`innerHTML`吧~
// 2. 假設(shè)上面你改好了，然后下面這樣的格式寫html，用`oUl.lastChild`獲取到的....是一個回車符號233，parseInt('') = NaN 。。~驚不驚喜，意不意外~
<ul class="oUl">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

那么你可以寫成這樣：

// html
<ul class="oUl">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li></ul>  // 最后一個不換行
// js
var cRlitextnode = oUl.lastChild.innerHTML;

不改html的話——————
或者這樣

var cRlitextnode = oUl.lastElementChild.innerHTML;  // 注意firstElementChild的兼容性

再或者兼容更好的

var cRlitextnode = oUl.children[oUl.children.length - 1].innerHTML;

2017年12月3日 10:41

編輯回答

任她鬧

var oBtn = document.getElementsByTagName("input")[0];
    oBtn.onclick = append;
    function append(){
        var oUl = document.getElementsByTagName("ul")[0];
        var cRlitextnode = parseInt(oUl.lastElementChild.innerText);
        cRlitextnode++;
        console.log(cRlitextnode);
        var li = document.createElement("li"); 
        var textNode = document.createTextNode(cRlitextnode);
       
        oUl.appendChild(li);
        li.appendChild(textNode);
    }

2018年3月15日 03:42