CODEWITHSUNDEEP
javascripthtmldocument.write
zall
zall

Reputation: 585

Replacing Document.write Problems(I did some research but still failed)

I got a great answer to this but have more questions. :) I was told that having javascript declared in two different places was bad and messy(you can see in the answer below), but I'm learning from a book right now and it told me to put my variables, arrays, functions etc. in the head of the html and the rest in the body.(that's why I have javascript declared in two different places) Is that wrong and why? He also recommended using a developer tool. I'm very new to coding in general and don't know much about these could anyone recommend a developer tool for chrome? Also what would a developer tool do? Thanks!

This was fixed:

Hi I was converting the card war game so it worked on a page instead of in the console and here was my original code http://pastebin.com/AgLgy97F. I was trying to use document.write to write out the code on a web, but I found out that document.write rewrote the whole page and removed the button I put there to progress to the next turn.

I looked on the forums and I looked online and came to the conclusion that I shoud replace it using this<div id="play"></div> and document.getElementById("play").innerHTML="I'm a string!". So I made this http://pastebin.com/29mVqp67. I tried it out and nothing happened -_-. What did I do wrong replacing document.write?

The new code I made is here too:

<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>

Upvotes: 0

Views: 97

Answers (1)

dc5
dc5

Reputation: 12441

You have a few problems here to start with.

  • you have your javascript declared in two different places and in both cases you are polluting the global namespace. That should be cleaned up and may help identify some problems.

  • you have an unterminated string literal at the end of this line:

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

  • getElementByID NEEDS to be getElementById

  • Your disp() function is incorrect. As it is written, each successive line is replacing the previous text.

    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; };

This can be fixed by concatenating the strings together prior to setting innerHtml, or, to have more control over the output you can use separate elements. Pseudo code:

else.innerHTML = string1 + string2 + string3;

I'd recommend making some heavy use of the developer tools for whichever browser you are using for development. It will help you catch many of these problems either by watching the console output or by stepping through the code.

I've put your code in a jsFiddle as well.

That should get you started. Good luck!

Upvotes: 1

Related Questions