用于循环搜索ID的Javascript

时间:2014-11-12 16:53:22

标签: javascript loops dom

好的,所以我对这个有点困惑,我先向你展示代码然后解释。

    var number = 1;
var maxguess = 6;
/*make the array of possible words*/
var arr = ["horse", "cow", "blueberry", "apples", "time", "hollow", "pumpkin", "telephone", "computer", "calculator", "tower", "castle"];
/*write shuffler code*/
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex ;
    // While there remain elements to shuffle...
    while (0 !== currentIndex) {
        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }
  return array;
}
/*shuffle the array*/
shuffle(arr);
/*make the storage array for user entry*/
var gstore = [];
/*get the first entry in the array, make it a string, and remove any commas*/
var teme = arr.slice(0, 1).toString().replace(/,/g,'');

console.log(teme);

for (var i = 0; i <= 9; i++) {
    if (i > teme.length){
   document.getElementById(i).innerHTML="x";
   }
}

/*listen for button click*/
document.getElementById('sendIt').addEventListener('click', process);
/*function for 'process'*/
function process() {
    /*get the guess from the user*/
    var guess = document.getElementById('guess').value.toString().toLowerCase();
    /*check for any index of this guess*/
        if (gstore.indexOf(guess, 0) == -1){
            /*store this guess*/
            gstore.push(guess);
            /*make storage array for letter indicies*/
            var indices = [];
            /*find indicies of the guess*/
                for(var i=0; i<teme.length;i++) {
                    if (teme[i] === guess) {
                        document.getElementById(i).innerHTML = guess.toString();
                    }
                }
            number++;
        }
    if (gstore.indexOf(guess, 0) != -1){

    }
}

好吧,这是我在课堂上制作的刽子手游戏。在JS的底部附近你可以看到我写了以下内容 -

for(var i=0; i<teme.length;i++) {
                    if (teme[i] === guess) {
                        document.getElementById(i).innerHTML = guess.toString();
                    }
                }

现在,如果我保持原样,这样我就不会在JS控制台中出现任何错误。现在,我在行

时遇到错误
document.getElementById(i).innerHTML="";

当我把它放在按钮点击功能之外

console.log(teme);

for (var i = 0; i <= 9; i++) {
    if (i > teme.length){
   document.getElementById(i).innerHTML="";
   }
}

具体而言,错误状态

[Error] TypeError: null is not an object (evaluating 'document.getElementById(i).innerHTML=" "')
    global code (clar.js, line 31)

现在如果这是在这里抛出一个错误,是否值得更改此位置的代码,或者我在两个实例中都做了不好的事情,即使第二个实例有效?

非常感谢所有帮助,我的javascript老师不知道您在编写

时可以输入变量
document.getElementById(variableName)

所以他对我没有任何帮助,而且我觉得能够做一些没有框架的事情很好

编辑:抱歉,忘了HTML,这应该有助于清除我正在做的事情

<html>
<head>
</head>
<body>
    <input type="text" name="" value="" id="guess" /><br>
    <input type="button" name="" value="submit" id="sendIt" /><br />
    <script src="./clar.js" type="text/javascript"></script>
    <span id="0"></span><span id="1"></span><span id="2"></span><span id="3"></span><span id="4"></span><span id="5"></span><span id="6"></span><span id="7"></span><span id="8"></span><span id="9"></span>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

你的第二个for循环是访问一个超出范围的项目,索引器正在返回一个空对象。

更改自:

for (var i = 0; i <= teme.length; i++)

为:

for (var i = 0; i < teme.length; i++)

答案 1 :(得分:0)

您的错误代码将来自JavaScript,而不是在您的文档中找到html元素。

document.getElementById(i).innerHTML = guess.toString();

您确定html中的元素的ID范围是0到teme.length吗?

如果您添加html也可能会有所帮助!