0

He leído todas las preguntas sugeridas y no encuentro la contestación a este error. Tengo tres archivos haciendo un programa simple HTML/JavaScript.

var currentPlayer = "O"
function place(box) {
    if(box.innerText != "") return;
    box.innerText = currentPlayer;
    currentPlayer == "O" ? currentPlayer = "X": currentPlayer = "O";
    //Box 1
    if(box.id == "0_0"){
        checkGameBoard("0_0","1_0","2_0");
        checkGameBoard("0_0","1_1","2_2");
        checkGameBoard("0_0","1_0","2_0");
    }
    //Box 2
    if(box.id == "1_0"){
        checkGameBoard("0_0","1_0","2_0");
        checkGameBoard("1_0","1_1","1_2");
    }
    //Box 3
    if(box.id == "2_0"){
        checkGameBoard("0_0","1_0","2_0");
        checkGameBoard("2_0","1_1","0_2");
        checkGameBoard("2_0","2_1","2_2");
    }
    //Box 4
    if(box.id == "0_1"){
        checkGameBoard("0_1","1_1","2_1");
        checkGameBoard("0_0","0_1","0_2");
    }
    //Box 5
    if(box.id == "1_1"){
        checkGameBoard("0_0","1_1","2_2");
        checkGameBoard("1_0","1_1","1_2");
        checkGameBoard("2_0","1_1","0_2");
        checkGameBoard("0_1","1_1","2_1");
    }
     //Box 6
     if(box.id == "2_1"){
        checkGameBoard("0_1","1_1","2_1");
        checkGameBoard("2_0","2_1","2_2");
    }
    //Box 7
    if(box.id == "0_2"){
        checkGameBoard("0_0","0_1","0_2");
        checkGameBoard("0_2","1_1","2_0");
        checkGameBoard("0_2","1_2","2_2");
    }
    //Box 8
    if(box.id == "1_2"){
        checkGameBoard("0_2","1_2","2_2");
        checkGameBoard("1_0","1_1","1_2");
    }
    //Box 9
    if(box.id == "2_2"){
        checkGameBoard("0_2","1_2","2_2");
        checkGameBoard("2_2","1_1","0_0");
        checkGameBoard("2_0","2_1","2_2");
    }
}
function checkGameBoard(firstCoord,secondCoord,thirdCoord) {
    var first = document.getElementById(firstCoord).innerText;
    var second = document.getElementById(secondCoord).innerText;
    var thrid = document.getElementById(thirdCoord).innerText;
    if(first == "") return;
        if(first == second && first == thrid){
            alert("Winner!")
        }
}
//+ attacks a random adjacent oppenent peice ÷ trades places with random adjacent opopnet * places a second copy on empty adjacent square
var noughts = ["O", "O+","O-", "O/", "O*"]
var crosses = ["X", "X+", "X÷", "X*"]

function showOptions() {  
    document.getElementById("Player1").innerHTML = "";
    for(i=0; i<noughts.length; i++) {
        document.getElementById("Player1").innerHTML += "<input type='button' value='"+ noughts[i] + "' onclick='chooseThis('" + noughts[i] + "')>";
        // alert(document.getElementById("Player1").innerHTML)
    }
}

function chooseThis(item) {
     currentPlayer = item;
     alert(item);
 }
.home {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 98vh;
  padding: 0;
  margin: none;
}
.row {
  display: flex;
  flex-direction: row;
}
.row div {
  padding: 10px;
  border: 1px solid;
  height: 30px;
  width: 30px;
}
<div class="home"> 
    <div class="row">
        <div id="0_0" onclick="place(this)"></div>
        <div id="1_0" onclick="place(this)"></div>
        <div id="2_0" onclick="place(this)"></div>
    </div>
    <div class="row">
        <div id="0_1" onclick="place(this)"></div>
        <div id="1_1" onclick="place(this)"></div>
        <div id="2_1" onclick="place(this)"></div>
    </div>
    <div class="row">
        <div id="0_2" onclick="place(this)"></div>
        <div id="1_2" onclick="place(this)"></div>
        <div id="2_2" onclick="place(this)"></div>
    </div>
    <div id="Player1">
        <input type="button" value="Ready Player One?" id="PlayerOne" onclick="showOptions()">
    </div>
</div>

Si elimino el atributo de onclick trabaja bien. Sin embargo cuando uso el atributo recibo el mensaje de unexpected token. He tratado de dividir la sentencia en secciones mas pequeñas pero recibo el mismo error.

2
  • Recuerda que si la respuesta resolvió tu problema, puedes marcarla con la palomita debajo de las flechas de la respuesta para indicar que fue resuelta el problema.
    – Chofoteddy
    el 15 dic. 2018 a las 7:45
  • Esta herramienta me ayuda mucho, espero que te sirva: jshint.com
    – Mr. Baldan
    el 15 dic. 2018 a las 11:17

1 respuesta 1

1

Debido a que estás concatenando un valor para generar un elemento, deberás indicar que es una cadena de texto para evitar el error de sintáxis (prestar atención al parámetro en la llamada a la función chooseThis()).

Ejemplificando, tu código actual queda:

<input type="button" value="O-" onclick="chooseThis(O-)">

Y el corregido es:

<input type="button" value="O-" onclick="chooseThis('O-')">

var currentPlayer = 'O'
function place(box) {
    if(box.innerText != '') return;
    box.innerText = currentPlayer;
    currentPlayer == 'O' ? currentPlayer = 'X': currentPlayer = 'O';
    //Box 1
    if(box.id == '0_0'){
        checkGameBoard('0_0','1_0','2_0');
        checkGameBoard('0_0','1_1','2_2');
        checkGameBoard('0_0','1_0','2_0');
    }
    //Box 2
    if(box.id == '1_0'){
        checkGameBoard('0_0','1_0','2_0');
        checkGameBoard('1_0','1_1','1_2');
    }
    //Box 3
    if(box.id == '2_0'){
        checkGameBoard('0_0','1_0','2_0');
        checkGameBoard('2_0','1_1','0_2');
        checkGameBoard('2_0','2_1','2_2');
    }
    //Box 4
    if(box.id == '0_1'){
        checkGameBoard('0_1','1_1','2_1');
        checkGameBoard('0_0','0_1','0_2');
    }
    //Box 5
    if(box.id == '1_1'){
        checkGameBoard('0_0','1_1','2_2');
        checkGameBoard('1_0','1_1','1_2');
        checkGameBoard('2_0','1_1','0_2');
        checkGameBoard('0_1','1_1','2_1');
    }
     //Box 6
     if(box.id == '2_1'){
        checkGameBoard('0_1','1_1','2_1');
        checkGameBoard('2_0','2_1','2_2');
    }
    //Box 7
    if(box.id == '0_2'){
        checkGameBoard('0_0','0_1','0_2');
        checkGameBoard('0_2','1_1','2_0');
        checkGameBoard('0_2','1_2','2_2');
    }
    //Box 8
    if(box.id == '1_2'){
        checkGameBoard('0_2','1_2','2_2');
        checkGameBoard('1_0','1_1','1_2');
    }
    //Box 9
    if(box.id == '2_2'){
        checkGameBoard('0_2','1_2','2_2');
        checkGameBoard('2_2','1_1','0_0');
        checkGameBoard('2_0','2_1','2_2');
    }
}
function checkGameBoard(firstCoord,secondCoord,thirdCoord) {
    var first = document.getElementById(firstCoord).innerText;
    var second = document.getElementById(secondCoord).innerText;
    var thrid = document.getElementById(thirdCoord).innerText;
    if(first == '') return;
        if(first == second && first == thrid){
            alert('Winner!')
        }
}
//+ attacks a random adjacent oppenent peice ÷ trades places with random adjacent opopnet * places a second copy on empty adjacent square
var noughts = ['O', 'O+','O-', 'O/', 'O*']
var crosses = ['X', 'X+', 'X÷', 'X*']

function showOptions() {  
    document.getElementById('Player1').innerHTML = '';
    for(i=0; i<noughts.length; i++) {
        document.getElementById('Player1').innerHTML += '<input type="button" value="'+ noughts[i] + '" onclick="chooseThis(\'' + noughts[i] + '\')">';
        // alert(document.getElementById('Player1').innerHTML)
    }
}

function chooseThis(item) {
     currentPlayer = item;
     alert(item);
 }
.home {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 98vh;
  padding: 0;
  margin: none;
}
.row {
  display: flex;
  flex-direction: row;
}
.row div {
  padding: 10px;
  border: 1px solid;
  height: 30px;
  width: 30px;
}
<div class="home"> 
    <div class="row">
        <div id="0_0" onclick="place(this)"></div>
        <div id="1_0" onclick="place(this)"></div>
        <div id="2_0" onclick="place(this)"></div>
    </div>
    <div class="row">
        <div id="0_1" onclick="place(this)"></div>
        <div id="1_1" onclick="place(this)"></div>
        <div id="2_1" onclick="place(this)"></div>
    </div>
    <div class="row">
        <div id="0_2" onclick="place(this)"></div>
        <div id="1_2" onclick="place(this)"></div>
        <div id="2_2" onclick="place(this)"></div>
    </div>
    <div id="Player1">
        <input type="button" value="Ready Player One?" id="PlayerOne" onclick="showOptions()">
    </div>
</div>

2
  • Asi que el \' define texto? onclick="chooseThis(\'' + noughts[i] + '\')">' Tambien usaste apostrofe (') solo para afuera y signo de cita (') adentro. Hay alguna regla que require este sintaxis o es preferencia. ¡Gracias por su ayuda!
    – Gabe Ruiz
    el 16 dic. 2018 a las 0:25
  • @GabeRuiz Respondiendo a tu pregunta, te recomiendo la siguiente lectura con relación a HTML: ¿Comillas dobles o comillas simples en HTML? y con relación a javascript, es es cuestión de que estilo emplees, yo te recomiendo la guía de estilo de Airbnb donde ahí mismo y muchos otros lados más, recomiendan comillas simples (Google, ejemplos ReactJs, etc).
    – Chofoteddy
    el 17 dic. 2018 a las 4:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.