Функция в javascript

Рейтинг: 0Ответов: 2Опубликовано: 09.10.2014

Здравствуйте!

Только начал изучать javascript и столкнулся с одной проблемой. Хочу по нажатии на кнопку менять нолик на крестик, но из-за чего-то не получается. Не могу понять из-за чего. Помогите решить проблему, пожалуйста.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type = "text/javascript">
            Function run(){
                var a = document.getElementById("button");
                if(a.value == "0"){
                    a.value = "X";
                } else{
                    a.value = "X";
                }
            }
        </script>
    </head>
    <body>

        <div id = "page">
            <table id="tab" cellpadding="0" border="1" cellspacing="0">
                <tr>
                    <td><input type="button" id="1" value="0" class="b1"/></td>
                    <td><input type="button" id="2" value="0" class="b1"/></td>
                    <td><input type="button" id="3" value="0" class="b1"/></td>
                </tr>
                <tr>
                    <td><input type="button" id="4" value="0" class="b1"/></td>
                    <td><input type="button" id="5" value="0" class="b1"/></td>
                    <td><input type="button" id="6" value="0" class="b1"/></td>
                </tr>
                <tr>
                    <td><input type="button" id="7" value="0" class="b1"/></td>
                    <td><input type="button" id="8" value="0" class="b1"/></td>
                    <td><input type="button" id="9" value="0" class="b1"/></td>
                </tr>
            </table>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>HTML</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

        <div id = "page">
            <table id="tab" cellpadding="0" border="1" cellspacing="0">
                <tr>
                    <td><input type="button" id="1" value="0" class="b1"/></td>
                    <td><input type="button" id="2" value="0" class="b1"/></td>
                    <td><input type="button" id="3" value="0" class="b1"/></td>
                </tr>
                <tr>
                    <td><input type="button" id="4" value="0" class="b1"/></td>
                    <td><input type="button" id="5" value="0" class="b1"/></td>
                    <td><input type="button" id="6" value="0" class="b1"/></td>
                </tr>
                <tr>
                    <td><input type="button" id="7" value="0" class="b1"/></td>
                    <td><input type="button" id="8" value="0" class="b1"/></td>
                    <td><input type="button" id="9" value="0" class="b1"/></td>
                </tr>
            </table>
        </div>
        <script type = "text/javascript">
            Function run(){
                    var a = document.getElementById("1");
                    if (a.value == "0") a.value = "X";
                }
        </script>
    </body>
</html>

Т.е. теперь я хочу изменить только первую ячейку.

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Полностью рабочий пример :)

<!DOCTYPE html>
<html>
    <head>
        <title>HTML</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <script>
            function run (id) {
                var a = document.getElementById(id);
                if (a.value == "0") {
                    a.value = "X";
                }
            }
        </script>
        <div id = "page">
            <table id="tab" cellpadding="0" border="1" cellspacing="0">
                <tr>
                    <td><input type="button" id="1" value="0" class="b1"/></td>
                    <td><input type="button" id="2" value="0" class="b1"/></td>
                    <td><input type="button" id="3" value="0" class="b1"/></td>
                </tr>
                <tr>
                    <td><input type="button" id="4" value="0" class="b1"/></td>
                    <td><input type="button" id="5" value="0" class="b1"/></td>
                    <td><input type="button" id="6" value="0" class="b1"/></td>
                </tr>
                <tr>
                    <td><input type="button" id="7" value="0" class="b1"/></td>
                    <td><input type="button" id="8" value="0" class="b1"/></td>
                    <td><input type="button" id="9" value="0" class="b1"/></td>
                </tr>
            </table>
        </div>
    </body>
</html>
▲ 1

Во-первых, у вас нет на странице элемента с id button, который вы пытаетесь найти.

Во-вторых, код нужно заключать в такой блок:

window.onload = function() {
    /* тут ваш код */
}

чтобы он выполнялся после полной загрузки страницы, либо размещать его в самом низу элемента body

В-третьих, у вас неправильно составлено условия в функции, точнее, если вы хотите просто менять значение на X, но не обратно, то блок else вам не нужен.