Как изменить и добавить новые объекты HTML с Javascript? - PullRequest
Новая
       2

Как изменить и добавить новые объекты HTML с Javascript?

0 голосов
/ 18 ноября 2011

Я немного знаю PHP, а также HTML / CSS, и я создал простую программу для викторин, позволяющую пользователям создавать и выполнять тесты, которые хранятся в базе данных MySQL.Теперь я пытаюсь улучшить удобство использования и эффективность программы.

В форме createQuestions есть восемь текстовых полей, в которые пользователи могут заполнить 2 или 8 из этих полей ответами.Хотя я думаю, что это выглядит грязно со всеми восемью, и я хотел бы иметь 2 текстовых поля, и когда во втором тексте есть текст, появляется третье и так далее ... до восьми

Iпровел несколько часов, изучая немного базовых JS, и сумел получить его, так что была кнопка, которая изменяла свойства видимости поля ввода, метки и переключателя каждой строки.Хотя я написал неэффективно много строк кода, чтобы сделать немногое: p - присвоение каждому объекту отдельного идентификатора, и он все еще работает не так хорошо.

Ниже приведен пример того, как мой HTMLвыложил, у меня их восемь, хотя я мог бы заменить это одним, и цикл PHP for с пределом 8. 

<div id="c">
<p class="subFont" id="cT" style="display:none;">Answer 3</p>
<input type="text" name="optionC"  class="textbox" style="display:none;" id="cI">
<input type="radio" name="correctAns" value="c" id="cR" style="display:none;">
<input type ="button" name="add" value="d" style="background-color:green;" onclick="addBox('d', 'inline')" id="cB" style="display:none;">
</div>

Есть предложения о том, как написать сценарий, описанный выше?Пожалуйста, не могли бы вы прокомментировать или кратко объяснить вашу работу, чтобы я мог извлечь уроки из нее:)

Заранее благодарю вас, я так благодарен всем вам, ребята, на stackoverflow;)

psкакие-либо предложения для изучения JS ресурсов?

Ответы [ 2 ]

1 голос
/ 18 ноября 2011

Чистый Javascript

чтобы скрыть / показать объект id = "cR" 

// hide
document.getElementById('cR').style.display = 'none';

// show
document.getElementById('cR').style.display = 'block';

для добавления текстовой области к 

document.getElementById('c').innerHTML += '<textarea name=".." id=".."></textarea>';

События 

<input type="text" id="xxx" onchange="your action here" />

JQuery

чтобы скрыть / показать объект id = "cR" 

// hide
$('#cR').hide();
$('#cR').fadeIn(); // with fade in effect

// show
$('#cR').show();
$('#cR').fadeOut(); // width fade out effect

для добавления текстовой области к 

$('#c').append('<textarea name=".." id=".."></textarea>');

События 

$('#xxx').change(function() {
    your action here
});
0 голосов
/ 18 ноября 2011

другой способ динамического добавления элемента на страницу. 

    <html>
       <head>
        <script>

            function addElement(obj) {
                text_limit = 5; // limit text then add text after that.    
                var text_lenght = obj.value.length;
                if(text_lenght >= text_limit){

                    var mainElement = document.getElementById('myDiv');
                    var counter= mainElement.getElementsByTagName('textarea').length;
                    var newTextArea = document.createElement('textarea');
                    var textareaname = 'txt_area'+counter;
                    newTextArea.setAttribute('id',textareaname );
                    newTextArea.onkeydown= function() {
                        addElement(this);
                    } 
                    mainElement.appendChild(newTextArea);

                }
            }

        </script>
        </head>
        <body>
            <div id="myDiv">
                <textarea id="txt_area2" onkeyup="addElement(this);"></textarea></div>
        </body>
    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...