Question

这里发生了一些奇怪的事情。

我的网站使用javascript来创建动态div，但是虽然它们被输入到DOM中（至少这是我的想法），但是当调用div时，javascript会返回null。

<小时/> 这是在 </body>

之前加载的javscript代码

function AddPlayer(){
    var name = document.getElementById('name').value;
    createBox(name);
};

function createBox(name){
    var span = document.createElement('span');
        span.id = name;
        span.innerHTML = name;
        document.getElementById("gameArea").appendChild(span);

    var span = document.createElement('span');
        span.id = "score-" + name;
        span.innerHTML = "0";
        document.getElementById("gameArea").appendChild(span);

    var inputSText = document.createElement('input');
        inputSText.type = "button";
        inputSText.value = "Add Points";
        inputSText.onclick = function(){AddPoints(name);};
        document.getElementById("gameArea").appendChild(inputSText);
};

function AddPoints(player){
    document.load(document.getElementById("#score-"+ player).innerHTML = "Please work");
};

<html>
<head>
    <title>Game Score Keeper</title>
</head>
<body>
    <h2>Game Score Keeper</h2>
    <input type="text" id="name" />
    <input type="button" value="Add Player" onclick="AddPlayer()" />

    <div id="gameArea">

    </div>
    <script src="index.js"></script>
</body>
</html>

<小时/> 以下是此项目的{jsfiddle} http://jsfiddle.net/jwmm6rk7/

Answer 1

您需要将元素的ID传递给document.getElementById。也就是说，没有哈希（#）符号。

function AddPoints(player) {
    document.load(document.getElementById("score-" + player).innerHTML = "HELLO");
};

Answer 2

看起来你是jQuery用户，你用#和name而不是player

function AddPoints(player) {
    document.getElementById("score-" + player).innerHTML = "HELLO";
};

document.getElementById在动态创建的div上返回null

2 个答案: