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

发布于 2024-12-17 09:03:33 字数 980 浏览 0 评论 0原文

我了解一些 PHP 以及 HTML/CSS，并且我制作了一个简单的测验程序，允许用户创建和进行存储在 MySQL 数据库中的测验。现在我想做的就是提高程序的可用性和效率。

在 createQuestions 表单上，有 8 个文本框，用户可以在其中 2 到 8 个框中填写答案。虽然我认为这看起来很乱，所有八个文本框，我想要的是有两个文本框，当第二个文本框中有文本时，第三个文本框就会出现，依此类推..直到八个

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

下面是我的 HTML 布局的示例，我有 8 个，但我可以用一个替换它，以及一个限制为 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>

关于如何编写上述脚本有什么建议吗？请您发表评论或简要解释一下您的工作原理，以便我可以从中学习:)

提前谢谢您，我非常感谢 stackoverflow 上的所有人;)

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

原文

I know a bit of PHP and so also HTML/CSS, and I have made a simple quiz program allowing users to create and do quizzes that are stored in a MySQL database. Now what I am trying to do is improve the usability and efficiency of the program.

On the createQuestions form, there are eight textboxes, users can fill in between 2 or 8 of these boxes with answers. Although I think this looks messy with all eight, and what I would like is to have 2 textboxes, and when there is text in the second one, the third one appears and so on.. up to eight

I spent a few hours learning a bit of basic JS, and managed to get it, so that there was a button that changed the visibility propities of the input box, label and radio button of each row. Although I wrote it really inefficiently lots of lines of code to do not much :p - giving each object a separate ID, and it still didn't work that well.

Below is an example of how my HTML is laid out, I have eight of these, though I could replace this with one, and a PHP for loop with a limit of 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>

Any suggestions on how to write the script descried above? Please could you comment or briefly explain your workings, so I can learn from it :)

Thank you loads in advance, I'm so grateful to all you guys on stackoverflow ;)

ps, any suggestions for learning js resources?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无所的.畏惧 2024-12-24 09:03:33

纯 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
});

Pure Javascript

to hide/show object id="cR"

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

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

to append textarea to

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

events:

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

jQuery

to hide/show object id="cR"

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

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

to append textarea to

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

events:

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

回复收藏 0 原文

地狱即天堂 2024-12-24 09:03:33

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

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

another way to add element dynamically in page..

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

回复收藏 0 原文

~没有更多了~