Php 如何使用Javascript更改和添加新的HTML对象？_Php_Javascript_Html_Dom_Object

Php 如何使用Javascript更改和添加新的HTML对象？

php javascript html dom object

Php 如何使用Javascript更改和添加新的HTML对象？,php,javascript,html,dom,object,Php,Javascript,Html,Dom,Object,我懂一点PHP，也懂HTML/CSS，我制作了一个简单的测验程序，允许用户创建和做存储在MySQL数据库中的测验。现在我要做的是提高程序的可用性和效率在createQuestions表单上，有八个文本框，用户可以在其中的2到8个框中填写答案。虽然我认为这八个文本框看起来都很混乱，我希望有两个文本框，当第二个文本框中有文本时，第三个文本框就会出现，以此类推。。最多八个我花了几个小时学习了一些基本的JS，并设法得到了它，因此有一个按钮可以改变每行的输入框、标签和单选按钮的可见性。虽然我写的代码效

我懂一点PHP，也懂HTML/CSS，我制作了一个简单的测验程序，允许用户创建和做存储在MySQL数据库中的测验。现在我要做的是提高程序的可用性和效率

在createQuestions表单上，有八个文本框，用户可以在其中的2到8个框中填写答案。虽然我认为这八个文本框看起来都很混乱，我希望有两个文本框，当第二个文本框中有文本时，第三个文本框就会出现，以此类推。。最多八个

我花了几个小时学习了一些基本的JS，并设法得到了它，因此有一个按钮可以改变每行的输入框、标签和单选按钮的可见性。虽然我写的代码效率很低，但很多行代码做得不多：p-给每个对象一个单独的ID，但它仍然不能很好地工作

下面是一个我的HTML布局的例子，我有八个，虽然我可以用一个替换这个，还有一个限制为8的PHP for循环

<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>


回答3

对如何编写上面描述的脚本有什么建议吗？请您评论或简要解释一下您的工作原理，以便我从中学习：）

提前感谢大家，我非常感谢stackoverflow上的所有人；）

ps，对学习js资源有什么建议吗

纯Javascript 隐藏/显示对象id=“cR”的步骤

将textarea附加到

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

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

将textarea附加到

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

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

在页面中动态添加元素的另一种方法

    <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>


函数加法器（obj）{
text_limit=5；//限制文本，然后在其后添加文本。
var text_lenght=obj.value.length；
如果（文本长度>=文本长度限制）{
var mainlelement=document.getElementById（'myDiv'）；
var counter=mainElement.getElementsByTagName（'textarea'）.length；
var newTextArea=document.createElement（'textarea'）；
var textareaname='txt_区域'+计数器；
setAttribute（'id'，textareaname）；
newTextArea.onkeydown=函数（）{
增编（本）；
} 
mainElement.appendChild（newTextArea）；
}
}

我建议查看jQuery或其他类似库，而不是使用纯js。这将为你节省大量的时间。基本的想法是，除了前两个，你隐藏你的输入，当用户开始输入第二个时，第三个将显示，依此类推。我不建议添加/删除元素。如果你真的隐藏/显示而不是附加/删除，那么如果js被禁用，它就会起作用，而且通常会少一些bug，我想。好的，现在就来看看，谢谢！）+1用于发布jQuery解决方案。顺便说一下，jQuery=JavaScript，因此我将第一个标题改为

purejavascript

；）onkeydown是错误的，innerHTML是错误的<

中的code>错误

$('#xxx').change(function() {
    your action here
});

    <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>