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

  • Danke für die schnelle Antwort. Ich bin ganz neu hier dewegen habe ich nicht gewusst, wie ich meine frage poste. lg Mirap

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

    Einmal editiert, zuletzt von Mirap (10. Februar 2021 um 00:28)

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

    Einmal editiert, zuletzt von basti1012 (28. September 2022 um 21:40)

Jetzt mitmachen!

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