Показать переменную JavaScript в HTML?

Question

Я запрограммировал игру Tic-Tac-Toe с HTML и JavaScript и хотел отобразить результаты (выигрыши, связи и потери). Я установил три переменных в скрипте, как показано ниже (выигрыш, потеря и связь), однако я не знаю, как постоянно отображать эти переменные.

Мой код: на this website

---

Мой код ниже, и я хочу, чтобы отобразить переменные, выиграть потери и связать это обновление постоянно: Tic-Tac-Toe Will Машины властвуй Человечество?

    if (document.all||document.getElementById){ 
       document.write('<style>.tictac{') 
       document.write('width:50px;height:50px;') 
       document.write('}</style>') 
       } 

       var sqr1 
       var sqr2 
       var sqr3 
       var sqr4 
       var sqr5 
       var sqr6 
       var sqr7 
       var sqr8 
       var sqr9 
       var sqr1T = 0; 
       var sqr2T = 0; 
       var sqr3T = 0; 
       var sqr4T = 0; 
       var sqr5T = 0; 
       var sqr6T = 0; 
       var sqr7T = 0; 
       var sqr8T = 0; 
       var sqr9T = 0; 
       var moveCount = 0; 
       var turn = 0; 
       var mode = 1; 
       var win = 0; 
       var lose = 0; 
       var draw = 0; 

       function help() { 
       alert("Welcome to Daniel Schwartz's Will Machines Conquer Mankind: Tic-Tac-Toe! You " + name + " play as the X's and Daniel Schwartz's Artifical Intelligence plays as the O's. You " + name + " select the square you want to put your X into by clicking it. A rule is that a X or an O cannot occupy a square that is already occupied by another X or O. The first player to get three squares filled with the user's letter (X's or O's) in a row wins. Good Luck and enjoy Daniel Schwartz's Will Machines Conquer Mankind: Tic-Tac-Toe!!") 
       } 

       function vari() 
       { 
       sqr1 = document.tic.sqr1.value 
       sqr2 = document.tic.sqr2.value 
       sqr3 = document.tic.sqr3.value 
       sqr4 = document.tic.sqr4.value 
       sqr5 = document.tic.sqr5.value 
       sqr6 = document.tic.sqr6.value 
       sqr7 = document.tic.sqr7.value 
       sqr8 = document.tic.sqr8.value 
       sqr9 = document.tic.sqr9.value 
       } 
       function check() 
       { 
        if(sqr1 == " X " && sqr2 == " X " && sqr3 == " X ") 
        { 
        win = win + 1;      
        alert(name + " Wins! " + name + " beat the artificial intelligence!") 
        reset() 
        } 
        else if(sqr4 == " X " && sqr5 == " X " && sqr6 == " X ") 
        { 
        win = win + 1;      
        alert(name + " Wins! " + name + " beat the artificial intelligence!") 
        reset() 
        } 
        else if(sqr7 == " X " && sqr8 == " X " && sqr9 == " X ") 
        { 
        win = win + 1;      
        alert(name + " Wins! " + name + " beat the artificial intelligence!") 
        reset() 
        } 
        else if(sqr1 == " X " && sqr5 == " X " && sqr9 == " X ") 
        { 
        win = win + 1;      
        alert(name + " Wins! " + name + " beat the artificial intelligence!") 
        reset() 
        } 
        else if(sqr1 == " X " && sqr4 == " X " && sqr7 == " X ") 
        { 
        win = win + 1;      
        alert(name + " Wins! " + name + " beat the artificial intelligence!") 
        reset() 
        } 
        else if(sqr2 == " X " && sqr5 == " X " && sqr8 == " X ") 
        { 
        win = win + 1;      
        alert(name + " Wins! " + name + " beat the artificial intelligence!") 
        reset() 
        } 
        else if(sqr3 == " X " && sqr6 == " X " && sqr9 == " X ") 
        { 
        win = win + 1;      
        alert(name + " Wins! " + name + " beat the artificial intelligence!") 
        reset() 
        } 
        else if(sqr1 == " X " && sqr5 == " X " && sqr9 == " X ") 
        { 
        win = win + 1;      
        alert(name + " Wins! " + name + " beat the artificial intelligence!") 
        reset() 
        } 
        else if(sqr3 == " X " && sqr5 == " X " && sqr7 == " X ") 
        { 
        win = win + 1;      
        alert(name + " Wins! " + name + " beat the artificial intelligence!") 
        reset() 
        } 
        else 
        { 
        winCheck() 
        check2() 
        drawCheck() 
        } 
       } 

       function check2() 
       { 
        vari() 
        drawCheck() 
        if(sqr1 == " O " && sqr2 == " O " && sqr3 == " O ") 
        { 
        lose = lose + 1;      
        alert(name + " Loses! " + name + " lost to the artificial intelligence!") 
        reset() 
        } 
        else if(sqr4 == " O " && sqr5 == " O " && sqr6 == " O ") 
        { 
        lose = lose + 1;      
        alert(name + " Loses! " + name + " lost to the artificial intelligence!") 
        reset() 
        } 
        else if(sqr7 == " O " && sqr8 == " O " && sqr9 == " O ") 
        { 
        lose = lose + 1;      
        alert(name + " Loses! " + name + " lost to the artificial intelligence!") 
        reset() 
        } 
        else if(sqr1 == " O " && sqr5 == " O " && sqr9 == " O ") 
        { 
        lose = lose + 1;      
        alert(name + " Loses! " + name + " lost to the artificial intelligence!") 
        reset() 
        } 
        else if(sqr1 == " O " && sqr4 == " O " && sqr7 == " O ") 
        { 
        lose = lose + 1;      
        alert(name + " Loses! " + name + " lost to the artificial intelligence!") 
        reset() 
        } 
        else if(sqr2 == " O " && sqr5 == " O " && sqr8 == " O ") 
        { 
        lose = lose + 1;      
        alert(name + " Loses! " + name + " lost to the artificial intelligence!") 
        reset() 
        } 
        else if(sqr3 == " O " && sqr6 == " O " && sqr9 == " O ") 
        { 
        lose = lose + 1;      
        alert(name + " Loses! " + name + " lost to the artificial intelligence!") 
        reset() 
        } 
        else if(sqr1 == " O " && sqr5 == " O " && sqr9 == " O ") 
        { 
        lose = lose + 1;      
        alert(name + " Loses! " + name + " lost to the artificial intelligence!") 
        reset() 
        } 
        else if(sqr3 == " O " && sqr5 == " O " && sqr7 == " O ") 
        { 
        lose = lose + 1;      
        alert(name + " Loses! " + name + " lost to the artificial intelligence!") 
        reset() 
        } 
       } 

       function drawCheck() 
       { 
        vari() 
        moveCount = sqr1T + sqr2T + sqr3T + sqr4T + sqr5T + sqr6T + sqr7T + sqr8T + sqr9T 
        if(moveCount == 9) 
        { 
        draw = draw + 1;      
        alert(name + " and the computer have come to a draw!") 
        reset() 
        } 
       } 

       function winCheck() 
       { 
        check2() 
        if(sqr2 == " O " && sqr3 == " O " && sqr1T == 0 && turn == 1) 
        { 
        document.tic.sqr1.value = " O " 
        sqr1T = 1; 
        turn = 0; 
        } 
        else if(sqr1 == " O " && sqr3 == " O " && sqr2T == 0 && turn == 1) 
        { 
        document.tic.sqr2.value = " O " 
        sqr2T = 1; 
        turn = 0; 
        } 
        else if(sqr1 == " O " && sqr2 == " O " && sqr3T == 0 && turn == 1) 
        { 
        document.tic.sqr3.value = " O " 
        sqr3T = 1; 
        turn = 0; 
        } 
        else if(sqr5 == " O " && sqr6 == " O " && sqr4T == 0 && turn == 1) 
        { 
        document.tic.sqr4.value = " O " 
        sqr4T = 1; 
        turn = 0; 
        } 
        else if(sqr4 == " O " && sqr6 == " O " && sqr5T == 0 && turn == 1) 
        { 
        document.tic.sqr5.value = " O " 
        sqr5T = 1; 
        turn = 0; 
        } 
        else if(sqr4 == " O " && sqr5 == " O " && sqr6T == 0 && turn == 1) 
        { 
        document.tic.sqr6.value = " O " 
        sqr6T = 1; 
        turn = 0; 
        } 
        else if(sqr8 == " O " && sqr9 == " O " && sqr7T == 0 && turn == 1) 
        { 
        document.tic.sqr7.value = " O " 
        sqr7T = 1; 
        turn = 0; 
        } 
        else if(sqr7 == " O " && sqr9 == " O " && sqr8T == 0 && turn == 1) 
        { 
        document.tic.sqr8.value = " O " 
        sqr8T = 1; 
        turn = 0; 
        } 
        else if(sqr7 == " O " && sqr8 == " O " && sqr9T == 0 && turn == 1) 
        { 
        document.tic.sqr9.value = " O " 
        sqr9T = 1; 
        turn = 0; 
        } 
        else if(sqr4 == " O " && sqr7 == " O " && sqr1T == 0 && turn == 1) 
        { 
        document.tic.sqr1.value = " O " 
        sqr1T = 1; 
        turn = 0; 
        } 
        else if(sqr1 == " O " && sqr7 == " O " && sqr4T == 0 && turn == 1) 
        { 
        document.tic.sqr4.value = " O " 
        sqr4T = 1; 
        turn = 0; 
        } 
        else if(sqr1 == " O " && sqr4 == " O " && sqr7T == 0 && turn == 1) 
        { 
        document.tic.sqr7.value = " O " 
        sqr7T = 1; 
        turn = 0; 
        } 
        else if(sqr5 == " O " && sqr8 == " O " && sqr2T == 0 && turn == 1) 
        { 
        document.tic.sqr2.value = " O " 
        sqr2T = 1; 
        turn = 0; 
        } 
        else if(sqr2 == " O " && sqr8 == " O " && sqr5T == 0 && turn == 1) 
        { 
        document.tic.sqr5.value = " O " 
        sqr5T = 1; 
        turn = 0; 
        } 
        else if(sqr2 == " O " && sqr5 == " O " && sqr8T == 0 && turn == 1) 
        { 
        document.tic.sqr8.value = " O " 
        sqr8T = 1; 
        turn = 0; 
        } 
        else if(sqr6 == " O " && sqr9 == " O " && sqr3T == 0 && turn == 1) 
        { 
        document.tic.sqr3.value = " O " 
        sqr3T = 1; 
        turn = 0; 
        } 
        else if(sqr3 == " O " && sqr9 == " O " && sqr6T == 0 && turn == 1) 
        { 
        document.tic.sqr6.value = " O " 
        sqr6T = 1; 
        turn = 0; 
        } 
        else if(sqr3 == " O " && sqr6 == " O " && sqr9T == 0 && turn == 1) 
        { 
        document.tic.sqr9.value = " O " 
        sqr9T = 1; 
        turn = 0; 
        } 
        else if(sqr5 == " O " && sqr9 == " O " && sqr1T == 0 && turn == 1) 
        { 
        document.tic.sqr1.value = " O " 
        sqr1T = 1; 
        turn = 0; 
        } 
        else if(sqr1 == " O " && sqr9 == " O " && sqr5T == 0 && turn == 1) 
        { 
        document.tic.sqr5.value = " O " 
        sqr5T = 1; 
        turn = 0; 
        } 
        else if(sqr1 == " O " && sqr5 == " O " && sqr9T == 0 && turn == 1) 
        { 
        document.tic.sqr9.value = " O " 
        sqr9T = 1; 
        turn = 0; 
        } 
        else if(sqr3 == " O " && sqr5 == " O " && sqr7T == 0 && turn == 1) 
        { 
        document.tic.sqr7.value = " O " 
        sqr7T = 1; 
        turn = 0; 
        } 
        else if(sqr3 == " O " && sqr7 == " O " && sqr5T == 0 && turn == 1) 
        { 
        document.tic.sqr5.value = " O " 
        sqr5T = 1; 
        turn = 0; 
        } 
        else if(sqr7 == " O " && sqr5 == " O " && sqr3T == 0 && turn == 1) 
        { 
        document.tic.sqr3.value = " O " 
        sqr3T = 1; 
        turn = 0; 
        } 
        else 
        { 
        computer() 
        } 
        check2() 
       } 
       function computer() 
       { 
        check2() 
        if(sqr1 == " O " && sqr5 == " O " && sqr3 == " X " && sqr8 == " X " && sqr9 == " X " && sqr6T == 0 && turn == 1) 
        { 
        document.tic.sqr6.value = " O " 
        sqr6T = 1; 
        turn = 0;      
        } 
        else if(sqr1 == " O " && sqr4 == " X " && sqr6 == " X " && sqr5T == 0 && turn ==1) 
        { 
        document.tic.sqr5.value = " O " 
        sqr5T = 1; 
        turn = 0; 
        } 
        else if(sqr6 == " X " && sqr3T == 0 && turn == 1) 
        { 
        document.tic.sqr3.value = " O " 
        sqr3T = 1; 
        turn = 0;      
        }   
        else if(sqr2 == " X " && sqr3 == " X " && sqr1T == 0 && turn == 1) 
        { 
        document.tic.sqr1.value = " O " 
        sqr1T = 1; 
        turn = 0; 
        } 
        else if(sqr1 == " X " && sqr3 == " X " && sqr2T == 0 && turn == 1) 
        { 
        document.tic.sqr2.value = " O " 
        sqr2T = 1; 
        turn = 0; 
        } 
        else if(sqr1 == " X " && sqr2 == " X " && sqr3T == 0 && turn == 1) 
        { 
        document.tic.sqr3.value = " O " 
        sqr3T = 1; 
        turn = 0; 
        } 
        else if(sqr5 == " X " && sqr6 == " X " && sqr4T == 0 && turn == 1) 
        { 
        document.tic.sqr4.value = " O " 
        sqr4T = 1; 
        turn = 0; 
        } 
        else if(sqr4 == " X " && sqr6 == " X " && sqr5T == 0 && turn == 1) 
        { 
        document.tic.sqr5.value = " O " 
        sqr5T = 1; 
        turn = 0; 
        } 
        else if(sqr4 == " X " && sqr5 == " X " && sqr6T == 0 && turn == 1) 
        { 
        document.tic.sqr6.value = " O " 
        sqr6T = 1; 
        turn = 0; 
        } 
        else if(sqr8 == " X " && sqr9 == " X " && sqr7T == 0 && turn == 1) 
        { 
        document.tic.sqr7.value = " O " 
        sqr7T = 1; 
        turn = 0; 
        } 
        else if(sqr7 == " X " && sqr9 == " X " && sqr8T == 0 && turn == 1) 
        { 
        document.tic.sqr8.value = " O " 
        sqr8T = 1; 
        turn = 0; 
        } 
        else if(sqr7 == " X " && sqr8 == " X " && sqr9T == 0 && turn == 1) 
        { 
        document.tic.sqr9.value = " O " 
        sqr9T = 1; 
        turn = 0; 
        } 
        else if(sqr4 == " X " && sqr7 == " X " && sqr1T == 0 && turn == 1) 
        { 
        document.tic.sqr1.value = " O " 
        sqr1T = 1; 
        turn = 0; 
        } 
        else if(sqr1 == " X " && sqr7 == " X " && sqr4T == 0 && turn == 1) 
        { 
        document.tic.sqr4.value = " O " 
        sqr4T = 1; 
        turn = 0; 
        } 
        else if(sqr1 == " X " && sqr4 == " X " && sqr7T == 0 && turn == 1) 
        { 
        document.tic.sqr7.value = " O " 
        sqr7T = 1; 
        turn = 0; 
        } 
        else if(sqr5 == " X " && sqr8 == " X " && sqr2T == 0 && turn == 1) 
        { 
        document.tic.sqr2.value = " O " 
        sqr2T = 1; 
        turn = 0; 
        } 
        else if(sqr2 == " X " && sqr8 == " X " && sqr5T == 0 && turn == 1) 
        { 
        document.tic.sqr5.value = " O " 
        sqr5T = 1; 
        turn = 0; 
        } 
        else if(sqr2 == " X " && sqr5 == " X " && sqr8T == 0 && turn == 1) 
        { 
        document.tic.sqr8.value = " O " 
        sqr8T = 1; 
        turn = 0; 
        } 
        else if(sqr6 == " X " && sqr9 == " X " && sqr3T == 0 && turn == 1) 
        { 
        document.tic.sqr3.value = " O " 
        sqr3T = 1; 
        turn = 0; 
        } 
        else if(sqr3 == " X " && sqr9 == " X " && sqr6T == 0 && turn == 1) 
        { 
        document.tic.sqr6.value = " O " 
        sqr6T = 1; 
        turn = 0; 
        } 
        else if(sqr3 == " X " && sqr6 == " X " && sqr9T == 0 && turn == 1) 
        { 
        document.tic.sqr9.value = " O " 
        sqr9T = 1; 
        turn = 0; 
        } 
        else if(sqr5 == " X " && sqr9 == " X " && sqr1T == 0 && turn == 1) 
        { 
        document.tic.sqr1.value = " O " 
        sqr1T = 1; 
        turn = 0; 
        } 
        else if(sqr1 == " X " && sqr9 == " X " && sqr5T == 0 && turn == 1) 
        { 
        document.tic.sqr5.value = " O " 
        sqr5T = 1; 
        turn = 0; 
        } 
        else if(sqr1 == " X " && sqr5 == " X " && sqr9T == 0 && turn == 1) 
        { 
        document.tic.sqr9.value = " O " 
        sqr9T = 1; 
        turn = 0; 
        } 
        else if(sqr3 == " X " && sqr5 == " X " && sqr7T == 0 && turn == 1) 
        { 
        document.tic.sqr7.value = " O " 
        sqr7T = 1; 
        turn = 0; 
        } 
        else if(sqr3 == " X " && sqr7 == " X " && sqr5T == 0 && turn == 1) 
        { 
        document.tic.sqr5.value = " O " 
        sqr5T = 1; 
        turn = 0; 
        } 
        else if(sqr7 == " X " && sqr5 == " X " && sqr3T == 0 && turn == 1) 
        { 
        document.tic.sqr3.value = " O " 
        sqr3T = 1; 
        turn = 0; 
        } 
        else if(sqr1 == " X " && sqr5T == 0 && turn == 1) 
        { 
        document.tic.sqr5.value = " O " 
        sqr5T = 1; 
        turn = 0; 
        } 
        else if(sqr3 == " X " && sqr5T == 0 && turn == 1) 
        { 
        document.tic.sqr5.value = " O " 
        sqr5T = 1; 
        turn = 0; 
        } 
        else if(sqr7 == " X " && sqr5T == 0 && turn == 1) 
        { 
        document.tic.sqr5.value = " O " 
        sqr5T = 1; 
        turn = 0; 
        } 
        else if(sqr9 == " X " && sqr5T == 0 && turn == 1) 
        { 
        document.tic.sqr5.value = " O " 
        sqr5T = 1; 
        turn = 0; 
        } 
        else if(sqr5 == " O " && sqr3 == " X " && sqr7 == " X " && sqr6T == 0 && turn == 1) 
        { 
        document.tic.sqr6.value = " O " 
        sqr6T = 1; 
        turn = 0; 
        } 
        else if(sqr1 == " O " && sqr2 == " X " && sqr5T == 0 && turn == 1) 
        { 
        document.tic.sqr5.value = " O " 
        sqr5T = 1; 
        turn = 0;      
        }      
        else if(sqr1 == " O " && sqr3 == " X " && sqr8 == " X " && sqr5T == 0 && turn == 1) 
        { 
        document.tic.sqr5.value = " O " 
        sqr5T = 1; 
        turn = 0;      
        }   
        else if(sqr1 == " O " && sqr8 == " X " && sqr7 == " X " && sqr9T == 0 && turn == 1) 
        { 
        document.tic.sqr9.value = " O " 
        sqr9T = 1; 
        turn = 0;      
        } 
        else if(sqr8 == " X " && sqr5T == 0 && turn == 1) 
        { 
        document.tic.sqr5.value = " O " 
        sqr5T = 1; 
        turn = 0;      
        }             
        else if(sqr3 == " X " && sqr5 == " O " && sqr8 == " X " && sqr9T == 0 && turn == 1) 
        { 
        document.tic.sqr9.value = " O " 
        sqr9T = 1; 
        turn = 0;      
        }            
        else if(sqr1 == " X " && sqr5 == " O " && sqr8 == " X " && sqr6T == 0 && turn == 1) 
        { 
        document.tic.sqr6.value = " O " 
        sqr6T = 1; 
        turn = 0;      
        }  
        else if(sqr1 == " O " && sqr5 == " X " && sqr9 == " X " && sqr3T == 0 && turn == 1) 
        { 
        document.tic.sqr3.value = " O " 
        sqr3T = 1; 
        turn = 0;      
        }  
        else 
        { 
        ArtificialIntelligence() 
        } 
        check2() 
       } 

       function ArtificialIntelligence() 
       { 
        vari() 
        if(document.tic.sqr1.value == "  " && turn == 1) 
        { 
        document.tic.sqr1.value = " O " 
        turn = 0 
        sqr1T = 1 
        } 
        else if(document.tic.sqr2.value == "  " && turn == 1) 
        { 
        document.tic.sqr2.value = " O " 
        turn = 0 
        sqr2T = 1 
        } 
        else if(document.tic.sqr3.value == "  " && turn == 1) 
        { 
        document.tic.sqr3.value = " O " 
        turn = 0 
        sqr3T = 1 
        } 
        else if(document.tic.sqr4.value == "  " && turn == 1) 
        { 
        document.tic.sqr4.value = " O " 
        turn = 0 
        sqr4T = 1 
        } 
        else if(document.tic.sqr5.value == "  " && turn == 1) 
        { 
        document.tic.sqr5.value = " O " 
        turn = 0 
        sqr5T = 1 
        } 
        else if(document.tic.sqr6.value == "  " && turn == 1) 
        { 
        document.tic.sqr6.value = " O " 
        turn = 0 
        sqr6T = 1 
        } 
        else if(document.tic.sqr7.value == "  " && turn == 1) 
        { 
        document.tic.sqr7.value = " O " 
        turn = 0 
        sqr7T = 1 
        } 
        else if(document.tic.sqr8.value == "  " && turn == 1) 
        { 
        document.tic.sqr8.value = " O " 
        turn = 0 
        sqr8T = 1 
        } 
        else if(document.tic.sqr9.value == "  " && turn == 1) 
        { 
        document.tic.sqr9.value = " O " 
        turn = 0 
        sqr9T = 1 
        } 
        check2() 
       } 

       function reset() 
       { 
        document.tic.sqr1.value = "  " 
        document.tic.sqr2.value = "  " 
        document.tic.sqr3.value = "  " 
        document.tic.sqr4.value = "  " 
        document.tic.sqr5.value = "  " 
        document.tic.sqr6.value = "  " 
        document.tic.sqr7.value = "  " 
        document.tic.sqr8.value = "  " 
        document.tic.sqr9.value = "  " 
        sqr1T = 0 
        sqr2T = 0 
        sqr3T = 0 
        sqr4T = 0 
        sqr5T = 0 
        sqr6T = 0 
        sqr7T = 0 
        sqr8T = 0 
        sqr9T = 0 
        vari() 
        turn = 0 
        moveCount = 0 
       } 

       function resetter() 
       { 
        reset() 
       } 

</head> 
<body> 
    <div id ="box"> 
     <h1>Created By: Daniel Schwartz</h1> 
     <font size="10" color="orange">Cherokee High School</font> 
    </div> 
</body> 

Answer 1

Использование document.getElementbyId("anyid").innerHTML = score;
Просто уравнять ваш счет переменной к innerHTML из "anydiv".
Для справки click here

Answer 2

Вот обновленная скрипка с вашего оригинала. Как упоминалось в peyushsrj, вам нужно будет обновить свои элементы (ы) с помощью баллов.

http://fiddle.jshell.net/2Mxht/2/

Я добавил следующий HTML

<br /> 
    Wins : <span id="wins">0</span> 
    Ties : <span id="ties">0</span> 
    Loses: <span id="losses">0</span> 
    <br /> 

JavaScript очень прямо вперед. В вашей функции reset я проверяю ваши переменные и присваиваю это значение внутреннемуHTML элемента.

// Update win/loss/tie values 
    //wins is the div id, win is the variable 
    document.getElementById('wins').innerHTML = win; 

    //ties is the div id, draw is the variable 
    document.getElementById('ties').innerHTML = draw; 

    //losses is the div id, lose is the variable 
    document.getElementById('losses').innerHTML = lose; 

Надеюсь, это поможет! :)