javascript

    Hallo alle! Ich habe TicTacToe programmiert leider habe ich ein Problem wenn ich auf button klicke , die Button bleiben nicht fix wo sie sein sollen. Button habe ich mit for schlrife erstellt. ich habe versucht dieses Problem mit CSS zu lösen habe leider nicht geschaft. für jeder Hilfe bin ich dankbar. Ich sende meine code auch mit. lg


    html-seminar.de/woltlab/attachment/2879/

    html-seminar.de/woltlab/attachment/2880/

    html-seminar.de/woltlab/attachment/2881/

    html-seminar.de/woltlab/attachment/2882/

    html-seminar.de/woltlab/attachment/2883/

    html-seminar.de/woltlab/attachment/2884/

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <title>TicTocTao</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

    * {

    box-sizing: border-box;

    }


    body {

    font-family: Arial, Helvetica, sans-serif;

    }


    /* Style the header */

    header {

    background-color: #666;

    padding: 20px;

    text-align: center;

    font-size: 35px;

    color: white;

    }


    article {

    float:center;

    padding: 20px;

    width: 70%;

    background-color: #f1f1f1;

    height: 500px; /* only for demonstration, should be removed */

    }


    /* Clear floats after the columns */

    section::after {

    content: "";

    display: table;

    clear: both;

    }


    /* Style the footer */

    footer {

    background-color: #777;

    padding: 10px;

    text-align: center;

    color: white;

    }

    .btn{
    width: 95px;

    height: 95px;

    border: 1px solid dodgerblue;

    margin: auto;

    border-radius: 4px;
    background-color: dodgerblue;

    color: white;

    font-size: 30px;

    cursor: pointer;


    }


    /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */

    @media (max-width: 600px) {

    nav, article {

    width: 100%;

    height: auto;

    }

    }

    </style>

    </head>

    <body>


    <header>

    <h2>Tic Tac Tao</h2>

    </header>


    <section>



    <article>


    <script>

    var rundenzaehler=0;


    function schreibe(x){
    let inhalt=document

    .getElementById("button"+ x)

    .getAttribute("value");


    if (inhalt=='')

    {

    if (rundenzaehler%2==0)

    {

    document

    .getElementById("button"+x)

    .setAttribute("value","X");

    }

    else

    {

    document

    .getElementById("button"+x)

    .setAttribute("value","O");

    }

    rundenzaehler=rundenzaehler+1;

    }

    else

    {

    alert("Geht nicht!");

    }


    }


    function resett()

    {

    for (let i=0;i<9;i++)

    {

    document

    .getElementById("button"+i)

    .setAttribute("value","");

    }

    }


    for(let i=0;i<9;i=i+1)

    {

    if (i%3==0) document.write('<p>');

    document.write('<input id="button'+i+'"');

    document.write(' class="btn"');

    document.write(' type="button"');

    document.write(' onclick="schreibe('+i+')"');

    document.write(' value="" />');

    document.write('&nbsp;','&nbsp;');

    if (i%3==2) document.write('</p>');


    document.write('&nbsp;' );


    }


    </script>

    <input type="button"

    class="resetButton"

    value="Reset"

    onclick="resett()">


    </article>

    </section>


    <footer>

    <p>Footer</p>

    </footer>


    </body>

    </html>

    Versuche es mal ohne document.write, das ist nicht mehr so angesagt, dafür gibt es document.getElementById , classname, Tagname.

    Dann könntest du deinen Zeilenumbruch den du nach 3 Feldern erzwingst auch mit Flexbox regeln.

    Ob jetzt Input Felder, das optimale dafür sind, kann ich auch nicht sagen.

    Es geht aber auch mit div.

    ** Link entfern, weil nicht mehr erreichbar **

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden