Question

输入主题编号时，可以输入该数值的数字。添加它。添加的数据将显示在ID为allSubjects的div中。我要创建的内容是，当我将鼠标悬停在值上时，应该出现一个关闭按钮，并且在按下该按钮时必须从数组中弹出。

示例：假设“主题数”为3，假设我添加了3个值。现在，当我将鼠标悬停在任何元素上并将其删除时，应该弹出值并更新占位符。与堆栈溢出标记相似，但这不是选择元素，而是文本输入。

<html>
    <head><style>
    #allSubjects{
        -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;  
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
    width: 398px; 
    }
    </style></head>
<body>
<form>
How many subjects are there?:
<input type="number" id="num" placeholder="No of Subjects" onblur="enterSubjects();"/></br></br>
Enter subject Names:
<input type="text" id="subject" /><br><br>
<input type="button" onclick="enterSubjects()" value="Add!"/>
</form>
<div id="allSubjects"></div>
</body>
<script type="text/javascript">

function enterSubjects() {
    var num = document.getElementById('num').value;
    var input = document.getElementById('subject');
    input.placeholder = 'Enter ' + num + ' subjects';
    if (input.value && subjects.length < num) {
        subjects.push(input.value);
        document.getElementById('allSubjects').innerHTML = subjects.join(', ');
        input.value = '';
        if(subjects.length != num){
            input.placeholder = 'insert ' + (num - subjects.length) + 'subjects';
        }else{
            input.placeholder = 'Done';
            input.readOnly = true;
        }
    }
    if (subjects.length === num) {
        document.getElementById('allSubjects').innerHTML = subjects.join(', ');
    }
}
var subjects = [];
</script>
</html>

而且，我使用Nodejs作为后端，我如何才能最终在req.body中获得更新的数组？

任何建议，欢迎修改答案。在此先感谢：）

如何在输入栏中输入多个值？

0 个答案: