Блог

Главная - Вопросы по программированию - Привет, моя цель в том, что когда я нажимаю кнопку «создать флажок», он автоматически создает флажок с идентификатором без использования текста типа ввода

Привет, моя цель в том, что когда я нажимаю кнопку «создать флажок», он автоматически создает флажок с идентификатором без использования текста типа ввода

#javascript #html

#javascript #HTML

Вопрос:

Новичок здесь. Моя цель — я хочу игнорировать текст типа ввода и добавить флажок с идентификатором, просто нажав на кнопку

 <html>
    <body>
        Enter a Value <input type="text" id="prod" autofocus />
        <p>
            <input type="button" id="bt" value="Create Checkbox" onclick="createChk(prod)" />
        </p>
    
        <p id="container"></p>
    </body>
    
    <script>
        var i = 1;      // COUNTER, FOR CHECKBOX ID.
    
        function createChk(obj) {
            if (obj.value !== '') {
    
                var chk = document.createElement('input');  // CREATE CHECK BOX.
                chk.setAttribute('type', 'checkbox', 'button');       // SPECIFY THE TYPE OF ELEMENT.
                chk.setAttribute('id', 'prodName'   i);     // SET UNIQUE ID.
                chk.setAttribute('value', obj.value);
                chk.setAttribute('name', 'products');
    
                var lbl = document.createElement('label');  // CREATE LABEL.
                lbl.setAttribute('for', 'prodName'   i);
    
           
    
                // APPEND THE NEWLY CREATED CHECKBOX AND LABEL TO THE <p> ELEMENT.
                container.appendChild(chk);
                container.appendChild(lbl);
    
                obj.value = '';
                document.getElementById(obj.id).focus();
    
                i = i   1;
            }
        }
    </script>
    </html>

Смотрите Фрагмент здесь: https://www.encodedna.com/javascript/practice-ground/default.htm?pg=create_checkboxes_using_javascript1

Комментарии:

1. привет и добро пожаловать в SO. Пожалуйста, не торопитесь, чтобы прочитать рекомендации и отредактировать свой вопрос. Используйте фрагмент кода, чтобы предоставить код вместо неформатированного и неупорядоченного беспорядка.

2. Привет, просто пытаюсь понять, что я понимаю вопрос, который вы хотите добавить флажок, независимо от того, получил ли ввод текста значение или нет?

3. ДА. Кстати, спасибо за решения. : D

4. @tacoshy Да. Я это сделаю. Извините и спасибо за ваше предложение. В следующий раз я проделаю большую работу по форматированию своих кодов. 🙂

Ответ №1:

надеюсь, я правильно понял ваш вопрос

этот код добавит флажок, независимо от значения ввода текста

все, что было удалено, это if утверждение

 <!DOCTYPE html>
<html>
<head>
    <title>Add Checkbox Dynamically using JavaScript</title>
</head>

<body>
    Enter a Value <input type="text" id="prod" autofocus />
    <p>
        <input type="button" id="bt" value="Create Checkbox" onclick="createChk(prod)" />
    </p>

    <p id="container"></p>
</body>

<script>
    var i = 1;      // COUNTER, FOR CHECKBOX ID.

    function createChk(obj) {
        
            var chk = document.createElement('input');  // CREATE CHECK BOX.
            chk.setAttribute('type', 'checkbox');       // SPECIFY THE TYPE OF ELEMENT.
            chk.setAttribute('id', 'prodName'   i);     // SET UNIQUE ID.
            chk.setAttribute('value', obj.value);
            chk.setAttribute('name', 'products');

            var lbl = document.createElement('label');  // CREATE LABEL.
            lbl.setAttribute('for', 'prodName'   i);

            // CREATE A TEXT NODE AND APPEND IT TO THE LABEL.
            lbl.appendChild(document.createTextNode(obj.value));

            // APPEND THE NEWLY CREATED CHECKBOX AND LABEL TO THE <p> ELEMENT.
            container.appendChild(chk);
            container.appendChild(lbl);

            obj.value = '';
            document.getElementById(obj.id).focus();

            i = i   1;
        
    }
</script>
</html>
Метки: , , ,