Консольная функция не определена ошибка?

Question

Консольная функция не определена ошибка?

0

Я не понимаю, почему моя функция не работает, и почему я продолжаю получать "test is not defined error", когда я пытаюсь запустить ее.

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

<ul class="timelineNav">
            <li class="navItem">
               <button type="button" onclick='test("1")'>
                   Event1
               </button>
            </li>
            <li class="navItem"><a class="navItem"    href="url">Event2</a></li>
            <li class="navItem"><a class="navItem" href="url">Event3</a></li>
            <li class="navItem"><a class="navItem" href="url">Event4</a></li>
            <li class="navItem"><a class="navItem" href="url">Event5</a></li>
</ul>

    <article id="post1"> 
            some text
    </article>
    <article id="post2"> 
            some text
    </article>
    <article id="post3"> 
            some text
    </article>

Функция Javascript:

function test(postLocation){
var post = $('#post'+postLocation).offset();
$(window).scrollTop(post.top);

};

Я изначально хотел, чтобы элемент списка сам начал функцию, но я думаю, что это должна быть кнопка?

John S 08 янв. 2014, в 07:02

Источник

0

переименуйте test в findPost или findPost в test ()
Raunak Kathuria 08 янв. 2014, в 05:38
0

Сожалею! Тест определяется в JavaScript. Я изменил имя с findPost на test ... но даже с test () (изменил его выше) я получаю / получаю ту же проблему.
user2559519 08 янв. 2014, в 05:43
0

Вы не передаете postLocation правильно?
Roy M J 08 янв. 2014, в 06:09
0

Еще одна ошибка от возни. Я обновил код, чтобы было понятнее, что я пытаюсь сделать. Пользователи предлагают добавить событие onClick в javascript, но есть ли другой способ? Я бы не хотел обновлять html и javascript каждый раз, когда добавляю новый пост / пункт меню. Было бы неплохо просто добавить новую статью и элемент списка и присвоить этой статье новый идентификатор, который может использовать одна функция javascript.
user2559519 08 янв. 2014, в 06:14

Показать ещё 2 комментария

Теги:

javascript

jquery

css

2 ответа

0

Обновлен HTML

Добавлен идентификатор кнопки для лучшего выбора jquery

<ul class="timelineNav">
    <li class="navItem">
        <button type="button" id="clickbutton">Event1</button>
    </li>
   ...

JS Прикрепите событие к вашей кнопке, удалите встроенное событие

$(function () {
    $('.navItem').on('click', '#clickbutton', function () {
        var location = 1; //define or fetch your location here
        var post = $('#post' + location).offset();
        alert(post);
        $(window).scrollTop(post.top);
    });
});

демонстрация

Raunak Kathuria 08 янв. 2014, в 04:05

Ещё вопросы

переименуйте test в findPost или findPost в test ()
Сожалею! Тест определяется в JavaScript. Я изменил имя с findPost на test ... но даже с test () (изменил его выше) я получаю / получаю ту же проблему.
Вы не передаете postLocation правильно?
Еще одна ошибка от возни. Я обновил код, чтобы было понятнее, что я пытаюсь сделать. Пользователи предлагают добавить событие onClick в javascript, но есть ли другой способ? Я бы не хотел обновлять html и javascript каждый раз, когда добавляю новый пост / пункт меню. Было бы неплохо просто добавить новую статью и элемент списка и присвоить этой статье новый идентификатор, который может использовать одна функция javascript.

John S · Accepted Answer · 2014-01-08T04-45-00.000Z

Вы не показываете, где определена функция test(), но если она находится внутри обработчика документа (или любой другой функции), она не находится в глобальной области, поэтому ее нельзя вызывать из атрибута onclick.

Или:

(1) Прекратите использование атрибута onclick и привяжите обработчик события клика к элементам.

(2) Переместите определение функции вне обработчика документа.

(3) Определите функцию следующим образом:

window.test = function(postLocation) {
    var post = $('#post'+postLocation).offset();
    $(window).scrollTop(post.top);
};

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

Я предлагаю следующее:

HTML:

<ul class="timelineNav">
    <li><a href="#post1">Event 1</a></li>
    <li><a href="#post2">Event 2</a></li>
    <li><a href="#post3">Event 3</a></li>
    <li><a href="#post4">Event 4</a></li>
</ul>

<article id="post1"> 
    some text
</article>

<article id="post2"> 
    some other text
</article>

JQuery:

$('.timelineNav').children('li').children('a').click(function(event) {
    event.preventDefault();
    var $article = $($(this).attr('href'));
    $(window).scrollTop($article.offset().top);
});

JSFiddle DEMO

Хотя элементы <a> не нужны, они приводят к изменению указателя мыши.

Спасибо!! Твоя скрипка действительно помогла. Я до сих пор не уверен, почему я не могу использовать функцию onclick для кнопки внутри HTML. Но твой путь сработал и я понимаю как.
@ user2559519 - Первая часть моего вопроса касалась вопроса, почему вы не можете вызвать свою функцию из атрибута onclick и как заставить ее работать.