Как заставить ссылку изменить содержание абзаца при клике? вернуть ложь не работает - PullRequest
0 голосов
/ 18 ноября 2011

Я учусь кодировать JavaScript.В этом сценарии я хочу, чтобы ссылка шла не в указанное место, а чтобы изменить текст в абзаце перед ним.Я создал функцию для достижения этого по нажатию кнопки, но функция не может возвращать значение false.

<html>
<head>
    <title>Javascript Test #6</title>
    <script type="text/javascript">
        document.getElementById("links").onclick=writeData();
        function writeData()
            {
                document.getElementById("para").innerHTML="Changed Paragraph Content";
                return false;
            }
    </script>
</head>
<body>
    <p id="para">Unchanged Paragraph Content</p>
    <br/>
    <a id="links" href="javascript-return.html"> Click here to change the paragraph content </a>
</body>
</html>

Ответы [ 2 ]

2 голосов
/ 18 ноября 2011
document.getElementById("links").onclick=writeData;

Не используйте скобки. Они заставляют вашу функцию оценивать. но вы хотите назначить функцию.

EDIT:

Конечно, вам нужно назначить свою функцию после загрузки документа. Так, как сейчас, при выполнении присваивания не будет элемента с идентификатором links. По сути, просто поместите свой блок скрипта ниже элемента links.

<html>
<head>
    <title>Javascript Test #6</title>
</head>
<body>
    <p id="para">Unchanged Paragraph Content</p>
    <br/>
    <a id="links" href="javascript-return.html"> Click here to change the paragraph content </a>

    <script type="text/javascript">
        document.getElementById("links").onclick=writeData;
        function writeData()
        {
            document.getElementById("para").innerHTML="Changed Paragraph Content";
            return false;
        }
    </script>
</body>
</html>

РЕДАКТИРОВАТЬ (используя window.onload):

<html>
<head>
    <title>Javascript Test #6</title>
    <script type="text/javascript">
        window.onload = function() {
            document.getElementById("links").onclick=writeData;
        }

        function writeData()
        {
            document.getElementById("para").innerHTML="Changed Paragraph Content";
            return false;
        }
    </script>
</head>
<body>
    <p id="para">Unchanged Paragraph Content</p>
    <br/>
    <a id="links" href="javascript-return.html"> Click here to change the paragraph content </a>
</body>
</html>
1 голос
/ 18 ноября 2011

При работе с document.getElementById вы должны убедиться, что во время вызова элементы находятся в DOM.Просто используйте встроенный обработчик щелчков:

<html>
    <head>
    <title>Javascript Test #6</title>
    <script type="text/javascript">
        function writeData()
        {
            document.getElementById("para").innerHTML="Changed Paragraph Content";
            return false;
        }
    </script>
    </head>
    <body>
        <p id="para">Unchanged Paragraph Content</p>
        <br/>
        <a id="links" href="javascript-return.html" onclick="return writeData();">    Click here       to change the paragraph content </a>
    </body>
 </html>

Или измените порядок вещей: сначала подготовьте DOM, а затем вставьте сценарий js:

<html>
    <head>
    <title>Javascript Test #6</title>
    </head>
    <body>
        <p id="para">Unchanged Paragraph Content</p>
        <br/>
        <a id="links" href="javascript-return.html" onclick="return writeData();">    Click here       to change the paragraph content </a>
        <script type="text/javascript">
            document.getElementById("links").onclick=writeData;
            function writeData()
            {
                document.getElementById("para").innerHTML="Changed Paragraph Content";
                return false;
            }
        </script>
    </body>
 </html>

см. это в действии здесь: http://jsfiddle.net/2CpcF/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...