Добавление элемента списка

0

Может ли кто-нибудь помочь мне разобраться с ошибкой в моем коде для начинающих? Я пытаюсь добавить элемент списка в список и пытаюсь изменить идентификатор того, какой список я добавляю в javascript. Заранее спасибо.

<html>
<head>
<script>
window.onload = init;
function init() {
    var button = document.getElementById("submit");
    button.onclick = changeDiv;
}
function changeDiv() {
    var counter=1
    var name = "ul";
    var textInput = document.getElementById("textInput");
    var userInput = textInput.value;
    alert("adding " + userInput);
    var li = document.createElement("li");
    li.innerHTML = userInput;
    var ul = document.getElementById("ul" + loop());
    ul.appendChild(li);
}

function loop() {
    return counter;
    if (counter==3){
        counter==0;
    }
    counter++;
}
</script>
</head>
<body>
    <form id="form">
        <input id="textInput" type="text" placeholder="input text here">
        <input id="submit" type="button">
    </form>
    <ul id="ul1">
    </ul>
    <ul id="ul2">
    </ul>
    <ul id="ul3">
    </ul>
</body>
  • 3
    Что происходит вместо этого? Опишите ошибку / поведение.
  • 1
    Ваша функция loop() неверна. Что это должно сделать?
Показать ещё 3 комментария
Теги:
function
getelementbyid

2 ответа

2

я думаю, что вы хотите, это один из них:

  1. Дайте объему counter глобальным (yuk)
  2. создать закрытие вокруг всего и объявить counter там
  3. вы можете передать counter в loop() когда вы его вызываете.
  4. define loop() в changeDiv().

Я думаю, вы хотите № 2, хотя я пошатнул его несколькими исправлениями в вашем коде:

играть на скрипке

Причина, по которой я пошел с № 2:

  • что закрытие позволяет вашей логике получать приложение к необходимым ему ресурсам
  • но защищайте область действия, на которую другие приложения могут работать (в настоящее время или в будущем), от каких-либо изменений, которые ваше приложение может попытаться выполнить в этой области. Например, если вы объявили счетчик глобальным, то все остальные javascript потенциально имели бы доступ на чтение/запись, который мог бы отрицательно повлиять на ваш продемонстрированный код, другой код или оба
  • сохраняет ваш текущий код начинающего как можно более неизменным
  • дает вам программирование с чрезвычайно важным аспектом javascript, который поможет вам сегодня и в будущем, когда вы узнаете

Ответ №4 аналогичен тому, что он создаст закрытие для changeDiv и loop, благодаря чему оба они имеют доступ к тому, что им нужно. Однако я не хотел слишком сильно менять существующие логические блоки, чтобы остановить постепенное обучение. Но можно определенно сделать аргумент для loop() (который на самом деле не является циклом, а скорее сеттер), заключенного в changeDiv() хотя вы, вероятно, удалите отдельный вызов функции в этой точке и еще больше интегрируете код,

Поделиться
  • 0
    Большое спасибо, я не понимал, что переменная должна быть глобальной.
  • 1
    @JamesDorfman Я бы не стал делать это глобальным, просто «измени свою сферу», но все равно используй замыкание, как будто я возился с тобой, чтобы у тебя не было проблем. Глобалы (глобальное загрязнение) следует избегать, особенно с таким названием, как counter
0

По сути, вам необходимо:

  • объявить counter в глобальной области (loop() не может получить к нему доступ в противном случае)
  • in loop(), оператор return должен быть LAST. Ничего после этого не будет выполнено.

Я немного изменил логику, и последний код:

window.onload = init;
var counter=1;
function init(){
    var button = document.getElementById("submit");
    button.onclick = changeDiv;
}
function changeDiv(){
    var name = "ul";
    var textInput = document.getElementById("textInput");
    var userInput = textInput.value;
    var id = "ul" + loop();
    alert("adding " + userInput + " to " + id);
    var li = document.createElement("li");
    li.innerHTML = userInput;
    var ul = document.getElementById(id);
    ul.appendChild(li);
}

function loop(){
    var tmp = counter++;

    if (counter==4){
        counter=1;
    }
    return tmp;
}

Обратите внимание на изменения в функции loop().

Я также изменил changeDiv() чтобы отобразить идентификатор списка в предупреждении.

Поделиться
  • 0
    @ Мёрре, ты прав; Я работал над лучшим ответом, когда вы написали комментарий. (РЕДАКТИРОВАТЬ: это был ответ на комментарий, который, очевидно, был удален).
  • 0
    Спасибо, это очень помогает. Именно такие люди, как ты, позволяют мне учиться на своих ошибках.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню