Beiträge von 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>

    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/