PROBLEMA EVENTO ONCLICK

Pubblicità
I

ImA13programmer

Nuovo Utente
Messaggi
125
Reazioni
0
Punteggio
34
Salve ragazzi,ho bisogno di creare un td di una table html,e mi serve l'evento di javascript on click.Il problema è questo: nel td ho inserito la funzione onclick con a seguito una funzione,che appunto si avvererà quando l'utente clicca sul td,e lo sapete meglio di me, ma la cosa strana è che se tra gli apici inserisco la funzione,non accade nulla,se invece inserisco tutto il contenuto della funzione,appunto,funziona,mi potete spiegare il motivo?Ecco il codice

NON FUNZIONANTE
Codice: 
//<td> della table
<td  onclick='createX1()' id ='td1' width='60px' height='60px' style='position:absolute; left:290px; top:210px;'></button></td>
//funzione createX1()
function createX1() {
var td1 = document.getElementById('td1');
document.getElementById('td1').innerHTML = '<div id="td1s"> X </div>';
};

FUNZIONANTE
Codice: 
 <td onclick ="var td1 = document.getElementById('td1');
document.getElementById('td1').innerHTML = '<div id="td1s"> X </div>';"id ='td1' width='60px' height='60px' style='position:absolute; left:290px; top:210px;'></button></td>
Tralaltro questo rende il codice disordinato e illeggibile
 
Allora:

1) non scrivere i titoli in maiuscolo (e due...)
2) nel codice c'è un refuso inutile: </button>
3) il codice Javascript va scritto nel tag <script>

Ecco un esempio funzionante:
HTML: 
<!DOCTYPE html>
<html>
  <body>
  <script>
  function createX1() {
    var td1 = document.getElementById('td1');
    document.getElementById('td1').innerHTML = '<div id="td1s"> X </div>';
  };
  </script>
  <table>
    <tr>
      <td  onclick='createX1()' id ='td1' width='60px' height='60px' style='background-color: red; position:absolute; left:290px; top:210px;'></td>
    </tr>
  </table>
  </body>
</html>
 
grazie dell'aiuto,ma non funziona,cioè ho provato a COPIARE & INCOLLARE quello che hai scritto tu nel codice effettivo del gioco che sto sviluppando,ma non funziona,mentre se prendo quello che hai scritto e lo metto in un altro codice a caso,funziona
 
ImA13programmer ha detto:
grazie dell'aiuto,ma non funziona,cioè ho provato a COPIARE & INCOLLARE quello che hai scritto tu nel codice effettivo del gioco che sto sviluppando,ma non funziona,mentre se prendo quello che hai scritto e lo metto in un altro codice a caso,funziona
Clicca per espandere...
Dipende cosa hai copiato...
E anche da che altro codice hai...

Guardando il codice che avevi messo manca il tag script nella parte Javascript e rimuovere </button>
Quindi puoi fare direttamente solo queste modifiche.

Eventualmente, se non è troppo grande il codice, prova a postarlo qui e ti aiuto.
 
Mursey ha detto:
Dipende cosa hai copiato...
E anche da che altro codice hai...

Guardando il codice che avevi messo manca il tag script nella parte Javascript e rimuovere </button>
Quindi puoi fare direttamente solo queste modifiche.

Eventualmente, se non è troppo grande il codice, prova a postarlo qui e ti aiuto.
Clicca per espandere...
Codice: 
<html>
<head><title>Tic Tac Toe</title>
<script>
//function on click per 2 per il td 2
function createX2() {
var td2 = document.getElementById('td2');

   
  };
};


//function onclick per il td 3 
function createX3() {
var td3 = document.getElementById('td3');
if (td3 == 'X' || td3 == 'O') {
 alert('Non puoi inserire la tua mossa qui,è già occupato');
} else if ( td3 != 'X' || td3 != 'O') {
    document.getElementById('td3').innerHTML = '<div id="td3s"> X </div>';

  };
};


//function onclick per il td 4 
function createX4() {
var td4 = document.getElementById('td4');
if (td4 == 'X' || td4 == 'O') {
 alert('Non puoi inserire la tua mossa qui,è già occupato');
} else if ( td4 != 'X' || td4 != 'O') {
    document.getElementById('td4').innerHTML = '<div id="td4s"> X </div>';

  }; 
};


//function onclick per il td 5
function createX5() {
var td5 = document.getElementById('td5');
if (td5 == 'X' || td5 == 'O') {
 alert('Non puoi inserire la tua mossa qui,è già occupato');
} else if ( td5 != 'X' || td5 != 'O') {
    document.getElementById('td5').innerHTML = '<div id="td5s"> X </div>';

  };
};

//function on click per  il td 6
function createX6() {
var td6 = document.getElementById('td6');
if (td6 == 'X' || td6 == 'O') {
 alert('Non puoi inserire la tua mossa qui,è già occupato');
} else if ( td6 != 'X' || td6 != 'O') {
    document.getElementById('td6').innerHTML = '<div id="td6s"> X </div>';

  };
};


//function onclick per il td 7 
function createX7() {
var td7 = document.getElementById('td7');
if (td7 == 'X' || td7 == 'O') {
 alert('Non puoi inserire la tua mossa qui,è già occupato');
} else if ( td7 != 'X' || td7 != 'O') {
    document.getElementById('td7').innerHTML = '<div id="td7s"> X </div>';

  };
};


//function onclick per il td 8
function createX8() {
var td8 = document.getElementById('td8');
if (td8 == 'X' || td8 == 'O') {
 alert('Non puoi inserire la tua mossa qui,è già occupato');
} else if ( td8 != 'X' || td8 != 'O') {
    document.getElementById('td8').innerHTML = '<div id="td8s"> X </div>';

  };
};

//function onclick per il td 9
function createX9() {
var td9 = document.getElementById('td9');
if (td9 == 'X' || td9 == 'O') {
 alert('Non puoi inserire la tua mossa qui,è già occupato');
} else if ( td9 != 'X' || td9 != 'O') {
    document.getElementById('td9').innerHTML = '<div id="td9s"> X </div>';
   
  };
};


function createX1() {
var td1 = document.getElementById('td1');
document.getElementById('td1').innerHTML = '<div id="td1s"> X </div>';

};
</script>



</head>
<body>

<style>
    #lver1 {
    width:5px;
    height:180px;
    background-color:black;
    position:absolute;
    top:150px;
    left:290px;
    }   
   
    #lver2 {
    width:5px;
    height:180px;
    background-color:black;
    position:absolute;
    top:150px;
    left:350px; 
    }

    #lor1{
    width:180px;
    height:5px;
    background-color:black;
    position:absolute;
    top:210px;
    left:230px;
    }

    #lor2{
    width:180px;
    height:5px;
    background-color:black;
    position:absolute;
    left:230px;
    top:270px;
    }

    #td1s {
    position:absolute;
    color:black;
    font-size:200%;
    }


   

</style>






<div id='lor1'></div>
<div id='lor2'></div>
<div id='lver1'></div>
<div id ='lver2'></div>















      <table>
            <tr>
            <tbody>
            <td  onclick='createX8()' id ='td8' width='60px' height='60px' style='position:absolute; left:290px; top:270px;'>  </td>
            <td  onclick='createX1()' id ='td1' width='60px' height='60px' style='position:absolute; left:290px; top:210px;'></button></td>
            <td  onclick='createX3()' id ='td3' width='60px' height='60px' style='position:absolute; left:290px; top:150px;'>  </td>
            <td  onclick='createX7()' id ='td7' width='60px' height='60px' style='position:absolute; left:230px; top:270px;'>  </td>
            <td  onclick='createX9()' id ='td9' width='60px' height='60px' style='position:absolute; left:350px; top:270px;'>  </td>
            <td  onclick='createX5()' id ='td5' width='60px' height='60px' style='position:absolute; left:230px; top:210px;'>  </td>
            <td  onclick='createX6()' id ='td6' width='60px' height='60px' style='position:absolute; left:350px; top:210px;'>  </td>
            <td  onclick='createX2()' id ='td2' width='60px' height='60px' style='position:absolute; left:230px; top:150px;'>  </td>
            <td  onclick='createX4()' id ='td4' width='60px' height='60px' style='position:absolute; left:350px; top:150px;'>  </td>
        </tbody>
    </tr>
</table>
<table id="cacca" style="position:absolute; left:900px; top:200px;"><tr><tbody><td></td></tbody></tr></tbody>






</body>
</html>

Ecco questo è il codice spero che tu mi possa aiutare
 
Ecco qui
HTML: 
<html>
<head>
  <title>Tic Tac Toe</title>
  <style>
    #lver1 {
      width: 5px;
      height: 180px;
      background-color: black;
      position: absolute;
      top: 150px;
      left: 290px;
    }

    #lver2 {
      width: 5px;
      height: 180px;
      background-color: black;
      position: absolute;
      top: 150px;
      left: 350px;
    }

    #lor1 {
      width: 180px;
      height: 5px;
      background-color: black;
      position: absolute;
      top: 210px;
      left: 230px;
    }

    #lor2 {
      width: 180px;
      height: 5px;
      background-color: black;
      position: absolute;
      left: 230px;
      top: 270px;
    }

    .mark {
      position: absolute;
      right: 23px;
      top: 21px;
    }
  </style>
  <script>
    function createX(element) {
      var value = element.innerHTML;
      if (value.trim() != '') {
        alert('Non puoi inserire la tua mossa qui,è già occupato');
      } else if (value != 'X' || value != 'O') {
        element.innerHTML = '<div class="mark">X</div>';
      };
    }
  </script>
</head>
<body>
  <div id='lor1'></div>
  <div id='lor2'></div>
  <div id='lver1'></div>
  <div id='lver2'></div>
  <table>
    <tr>
      <td onclick='createX(this)' id='td8' width='60px' height='60px' style='position:absolute; left:290px; top:270px;'>  </td>
      <td onclick='createX(this)' id='td1' width='60px' height='60px' style='position:absolute; left:290px; top:210px;'>  </td>
      <td onclick='createX(this)' id='td3' width='60px' height='60px' style='position:absolute; left:290px; top:150px;'>  </td>
      <td onclick='createX(this)' id='td7' width='60px' height='60px' style='position:absolute; left:230px; top:270px;'>  </td>
      <td onclick='createX(this)' id='td9' width='60px' height='60px' style='position:absolute; left:350px; top:270px;'>  </td>
      <td onclick='createX(this)' id='td5' width='60px' height='60px' style='position:absolute; left:230px; top:210px;'>  </td>
      <td onclick='createX(this)' id='td6' width='60px' height='60px' style='position:absolute; left:350px; top:210px;'>  </td>
      <td onclick='createX(this)' id='td2' width='60px' height='60px' style='position:absolute; left:230px; top:150px;'>  </td>
      <td onclick='createX(this)' id='td4' width='60px' height='60px' style='position:absolute; left:350px; top:150px;'>  </td>
    </tr>
  </table>
</body>
</html>
Alcune note:
  • C'era un errore di sintassi dopo la createX3, una }; di troppo
  • Ho spostato l'elenco degli stili all'inizio, meglio seguire un ordine logico nel codice della pagina
  • Ho messo una unica createX che si basa sull'elemento cliccato, quando viene chiamata le viene passato this che contiene l'elemento corrente
  • Controllo il valore di innerHTML per capire se è stato creato qualcosa al suo interno, se è vuota il valore è ' ' quindi uso la trim per eliminare lo spazio
  • L'elemento che creo dentro la cella usa la classe mark che serve per posizionarlo al centro della casella
 
Pubblicità
Pubblicità
Indietro
Top