替换Document.write问题(我做了一些研究,但仍然失败)

时间:2013-07-25 01:23:26

标签: javascript html document.write

我得到了一个很好的答案,但有更多的问题。 :)我被告知在两个不同的地方声明javascript是糟糕和凌乱的(你可以在下面的答案中看到),但我现在正在从一本书中学习,它告诉我把我的变量,数组,函数等。在html的头部和身体中的其余部分。(这就是为什么我在两个不同的地方声明了javascript)这是错误的,为什么?他还建议使用开发人员工具。我对编码一般都很陌生并且不太了解这些可能有人推荐用于chrome的开发人员工具吗?开发人员工具还会做什么?谢谢!

这是固定的:

嗨,我正在转换卡片战争游戏,因此它在页面而不是在控制台中工作,这是我的原始代码http://pastebin.com/AgLgy97F。我试图用document.write在网上写出代码,但我发现document.write重写了整个页面并删除了我放在那里的按钮以进入下一个回合。

我在论坛上看了一下,然后我在网上看到并得出结论,我应该使用<div id="play"></div>document.getElementById("play").innerHTML="I'm a string!"替换它。所以我做了http://pastebin.com/29mVqp67。我试了一下,什么都没发生-_-。替换document.write我做错了什么?

我制作的新代码也在这里:

<html>
    <head>  
        <script language="JavaScript">
        <!--
var disp = function() {
    document.getElementByID("play").innerHTML="You drew a "+user_disp+".";
    document.getElementByID("play").innerHTML="Your opponent drew a "+cpu_disp+".";
    document.getElementByID("play").innerHTML=statement;
};
var war = function() {
    document.getElementByID("play").innerHTML="W-A-R spells WAR!";
    disp();
};

var full = [1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,6,6,6,6,7,7,7,7,8,8,8,8,9,9,9,9,10,10,10,10,11,11,11,11,12,12,12,12,13,13,13,13];
var user = [];
var cpu = [];
var rand = 0;
//Shuffles and deals the deck
var shuffled = [];
for (var i=0;i<52;i++) {
    rand=Math.floor(Math.random()*full.length);
    shuffled.push(full[rand]);
    full.splice(rand,1);    
}
for (var j=0;j<52;j++) {
    if (j%2===0) {
        user[user.length]=shuffled.pop();
    } else {
        cpu[cpu.length]=shuffled.pop();
    }
}
//Creates a bunch of variables and functions that will be needed in the game
var cpu_card=0;
var cpu_warcard=0;
var cpu_war1=0;
var cpu_war2=0;
var cpu_war3=0;
var cpu_disp=0;
var user_card=0;
var user_warcard=0;
var user_war1=0;
var user_war2=0;
var user_war3=0;
var user_disp=0;
var statement=0;

var card_name = function(cpuc,userc) {
     switch (cpuc) {
        case 13:
            cpu_disp="K";
            break;
        case 12:
            cpu_disp="Q";
            break;
        case 11:
            cpu_disp="J";
            break;
        case 1:
            cpu_disp="A";
            break;
        default:
            cpu_disp=cpuc;
            break;
    }
    switch (userc) {
        case 13:
            user_disp="K";
            break;
        case 12:
            user_disp="Q";
            break;
        case 11:
            user_disp="J";
            break;
        case 1:
            user_disp="A";
            break;
        default:
            user_disp=userc;
            break;
    }
};
//Lets play the game!
        //-->
        </script>
    </head>

    <body>
        <form>
            <input type="Button" value="Click to Take Your Turn" onClick="playWar()"></input>
        </form>
        <p>
        <h1>This Is War Lets Play!!!!</h1>
        <br>
        <div id="play"></div>
        <script language="JavaScript">
        <!--

function playWar(){
if(user.length<52 && user.length>1) {
    //Picks out the cards that are used
    cpu_card=cpu.shift();
    user_card=user.shift();
    card_name(cpu_card,user_card);
    //Figures out if you win, lose, or go to war
    if (user_card<cpu_card) {
        statement="You lost!";
        cpu[cpu.length]=cpu_card;
        cpu[cpu.length]=user_card;
    } else {
        if (user_card>cpu_card) {
            statement="You won!";
            user[user.length]=user_card;
            user[user.length]=cpu_card;
        } else {
            if(cpu.length<3 || user.length<3){
                user[user.length]=user_card;
                cpu[cpu.length]=cpu_card;
            }
            else{
                statement="You tied! TO WAR!";
            }

        }
    }
    disp();
    //This is what happens when you go to war
    if (statement==="You tied! TO WAR!") {
        cpu_war1=cpu.shift();
        cpu_war2=cpu.shift();
        cpu_war3=cpu.shift();
        cpu_warcard=cpu.shift();
        user_war1=user.shift();
        user_war2=user.shift();
        user_war3=user.shift();
        user_warcard=user.shift();
        card_name(cpu_warcard,user_warcard);
        if (user_warcard<cpu_warcard) {
            statement="You lost the war to your opponent!";
            cpu[cpu.length]=cpu_war1;
            cpu[cpu.length]=cpu_war2;
            cpu[cpu.length]=cpu_war3;
            cpu[cpu.length]=cpu_warcard;
            cpu[cpu.length]=cpu_card;
            cpu[cpu.length]=user_war1;
            cpu[cpu.length]=user_war2;
            cpu[cpu.length]=user_war3;
            cpu[cpu.length]=user_warcard;
            cpu[cpu.length]=cpu_card;
        }   else {
            if(user_warcard>cpu_warcard) {
                statement="You crushed your opponent in war!";
                user[user.length]=user_war1;
                user[user.length]=user_war2;
                user[user.length]=user_war3;
                user[user.length]=user_warcard;
                user[user.length]=user_card;
                user[user.length]=cpu_war1;
                user[user.length]=cpu_war2;
                user[user.length]=cpu_war3;
                user[user.length]=cpu_warcard;
                user[user.length]=cpu_card;
            } else {
                statement="The war resulted in a stalemate!";
                user[user.length]=user_war1;
                user[user.length]=user_war2;
                user[user.length]=user_war3;
                user[user.length]=user_warcard;
                user[user.length]=user_card;
                cpu[cpu.length]=cpu_war1;
                cpu[cpu.length]=cpu_war2;
                cpu[cpu.length]=cpu_war3;
                cpu[cpu.length]=cpu_warcard;
                cpu[cpu.length]=cpu_card;
            }
        }
        war();
    }
}
//When you are done, here it finds if you win or lose this game
 else if (user.length===52) {
    document.getElementByID("play").innerHTML="You have crushed your opponent.  Feel free to steal all of his belongings!";
} else {
    document.getElementByID("play").innerHTML="Unfortunatly, you have fallen victim to your opponent's wrath and have been conquered.;
}
}

        //-->
        </script>
    </body>

1 个答案:

答案 0 :(得分:1)

这里有一些问题可以解决。

  • 您在两个不同的地方声明了javascript,在这两种情况下,您都在污染全局命名空间。应该清理它,可以帮助识别一些问题。

  • 在此行的末尾有一个未终止的字符串文字:

    you have fallen victim to your opponent's wrath and have been conquered. <===

  • getElementByID NEEDS 为getElementById

  • 您的disp()函数不正确。在编写时,每个连续的行都将替换之前的文本。

    var disp = function(){     document.getElementByID(“play”)。innerHTML =“你画了一个”+ user_disp +“。”;     document.getElementByID(“play”)。innerHTML =“你的对手画了一个”+ cpu_disp +“。”;     的document.getElementById( “玩”)的innerHTML =语句。 };

这可以通过在设置innerHtml之前将字符串连接在一起来修复,或者,为了更好地控制输出,可以使用单独的元素。伪代码:

else.innerHTML = string1 + string2 + string3;

我建议大量使用开发人员工具,无论您使用哪种浏览器进行开发。它可以通过观察控制台输出或单步执行代码来帮助您解决许多这些问题。

我也将您的代码放在jsFiddle中。

这应该让你开始。祝你好运!