javascript & html - создание новой опции флажка каждый раз, когда пользователь вводит элемент в текстовое поле - PullRequest
Новая
       32

javascript & html - создание новой опции флажка каждый раз, когда пользователь вводит элемент в текстовое поле

1 голос
/ 27 сентября 2019

Итак, в основном я создаю программу, которая позволяет пользователю создавать и управлять «списком дел».Это позволит пользователю добавлять новые элементы, удалять выбранные элементы, выделять / отменять выделение выбранных элементов, сортировать элементы и т. Д. В настоящее время я работаю над кнопкой добавления, но я чрезвычайно запутался с различными функциями в HTML.и код, который позволит мне манипулировать DOM.

Когда пользователь нажимает кнопку добавления и имя элемента является действительным, в список дел страницы должен быть добавлен новый элемент (который по существу создает новый флажок для каждого элемента, добавляемого пользователем).Этот флажок в основном позволяет выбрать / отменить выбор элемента, а также текст, который находился в текстовом поле имени элемента при нажатии кнопки добавления.

Полагаю, у меня сейчас две проблемы.Я пытаюсь убедиться, что имя элемента имеет длину не менее 1 символа.Я написал код в своем файле addHandler.js, но когда я ничего не пишу в текстовое поле и нажимаю кнопку «Добавить» в моем HTML-браузере, сообщение об ошибке не появляется.Я не знаю, почему это игнорирует мою функцию.Еще одна вещь, с которой я борюсь, это та часть, которая создает новый флажок для каждого добавляемого действительного элемента.Я знаю, как создать флажок на моей HTML-странице, но я не понимаю, как заставить мою программу создавать новый для каждого элемента, который вводит пользователь.

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

todo.html код: 

<html>
    <head>
        <title>Checklist</title>
    </head>
    <body>
        <div><h1>My to-do list</h1></div><br />
        <div id ="myCheckList">Enter an item:</div>
        <div>Type something: <input type="text" id="textbox"></input></div>
        <button type="button" id="addBut">Add item</button>
        <button type="button" id="removeBut">Remove items</button>
        <button type="button" id="toggleBut">Toggle highlight</button>
        <button type="button" id="sortBut">Sort items</button>
        <script src="addHandler.js"></script>
    </body>
</html>

addHandler.js код: 

function init(){
    let button = document.getElementById("addBut");
    button.onclick = buttonClicked;
    let tb = document.getElementById("textbox");
    tb.onblur = validate;
}

function add(){
    let someEle = document.getElementById("myCheckList");
    someEle.innerHTML = 'You added an item';
}

function validate(){
    if(document.getElementById("textbox").value.length == 0){
        alert("You need to enter something");
    }
}

1 Ответ

0 голосов
/ 27 сентября 2019

У вас должна быть оболочка, содержащая элементы вашего флажка, к которым вы можете добавлять новые элементы.

<div id="checklist_items"></div>

Затем вы можете использовать следующую функцию, чтобы создать новый элемент div, содержащийфлажок и введенный текст, а затем добавьте его в свой контрольный список: 

function addItem() {
    var input = document.getElementById("textbox");
    var wrapper = document.getElementById("checklist_items");
    if(input.value.trim() != "") {
        var new_element = document.createElement("DIV");
        new_element.innerHTML = '<input type="checkbox"> '+input.value;
        wrapper.appendChild(new_element);
    }
    else {
        alert("You must enter at least 1 character.");
    }
}

Я бы также использовал следующее, чтобы добавить функцию к вашей кнопке: 

document.getElementById("addBut").addEventListener("click", addItem);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...