gpt4 book ai didi

javascript - 如何在此代码中使用断线?

转载 作者:行者123 更新时间:2023-12-03 03:48:21 25 4
gpt4 key购买 nike

在我的代码中,我使用按钮的 onclick 方法。当我动态单击此按钮时,它会显示多个带有删除按钮的文本框。所有这些过程都成功运行。但所有文本框都连续显示。我想每行显示一个文本框。我必须在哪里添加 br 标签或/n ?

这是我的代码:

var button = document.getElementById('waypoint-input');

button.addEventListener("click", function() {

var parentNode = document.getElementById('waypoints-list');

var input = document.createElement('input');
input.type = 'text';
input.placeholder = 'Enter a waypoint location';
input.id = 'waypoint' + me.waypointIndex;
input.inputId = me.waypointIndex;
input.name = 'waypointlist';

input.addEventListener('input',
function() {

if (input.value == "") {

var waypoint = me.waypts.filter(function(obj) {
return obj.key === input.inputId;
})[0];

if (waypoint != null &&
typeof waypoint !== "undefined") {

var waypointIndexToRemove = me.waypts.map(
function(el) {
return el.key;
}).indexOf(input.inputId);

me.waypts.splice(waypointIndexToRemove, 1);


}
}
});

var removeInput = document.createElement('button');
removeInput.innerHTML = 'Remove';
removeInput.onclick = function() {
parentNode.removeChild(input);
parentNode.removeChild(removeInput);

var childInputs = parentNode.getElementsByTagName('input');

if (childInputs.length > 0) {
for (var i = 0; i < childInputs.length; i++) {
childInputs[i].inputId = i;
}
}

if (input.value != "" && input.value != null) {

var waypointIndexToRemove = me.waypts.map(function(el) {
return el.key;
}).indexOf(input.inputId);

me.waypts.splice(waypointIndexToRemove, 1);

for (var i = input.inputId; i < me.waypts.length; i++) {
me.waypts[i].key = me.waypts[i].key - 1;
}

me.route();
}

me.waypointIndex--;
}

parentNode.appendChild(input);
parentNode.appendChild(removeInput);

var waypointAutocomplete = new google.maps.places.Autocomplete(
input, {
/*placeIdOnly : true */
});

me.setupPlaceChangedListener(waypointAutocomplete, 'WYPT',
input.inputId);

me.waypointIndex++;

}, false);

最佳答案

您还应该附加 <br>每个 <input> 之后的标签:

parentNode.appendChild(input);
parentNode.appendChild(removeInput);
parentNode.appendChild(document.createElement('br'));

或者使用 <div> 可能会更好Rajesh 提到的包装器:

var wrapper = document.createElement('div');
parentNode.appendChild(wrapper);
wrapper.appendChild(input);
wrapper.appendChild(removeInput);

关于javascript - 如何在此代码中使用断线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45279953/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com