已解決430363個問題，去搜搜看，總會有你想問的

如何使用按鈕多次添加文本和輸入

首頁猿問如何使用按鈕多次添加文本和輸入

如何使用按鈕多次添加文本和輸入

Html5

慕田峪4524236 2023-12-11 15:26:52

我正在創建一個網站，允許用戶指定數量的輸入。我希望用戶能夠單擊一個按鈕，然后會出現一個新的文本和輸入框，他們可以輸入。這是我當前的代碼： <input type="button" onclick="addInput()"> <span id="companyX"></span><span id="companyBoxX"></span> <script> var countBox = 2; var boxName = 0; function addInput() { var boxName = "Company " + countBox; var company = document.getElementById("companyX"); company.innerHTML += boxName; var newBreak = document.createElement('br'); company.appendChild(newBreak); document.getElementById('companyBoxX').innerHTML+='<br/><input type="text" id="'+boxName+'" value="'+boxName+'" " /><br/>'; countBox += 1; } </script>目前的問題是，每次我嘗試添加新文本或輸入字段時，它只會附加到當前文本或輸入。我希望它們并排出現在新行上。前任：Company 1: (Input Box 1)Company 2: (Input Box 2)...我對 Javascript 和 HTML 非常陌生，任何幫助將不勝感激。謝謝！

查看完整描述

2 回答

忽然笑

TA貢獻1806條經驗獲得超5個贊

我相信你走在正確的道路上?？纯催@是否更接近您的需要。

var countBox = 2;

var boxName = 0;

function addInput()

{

var boxLabel = "<label>Company " + countBox + "</label>";

var element = document.getElementById('my-content');

var html = '<div class="row">'+boxLabel+': <input type="text" id="'+boxName+'" value="'+boxName+'" " /></div>';

appendHtml(element, html);

countBox += 1;

boxName += 1;

}

function appendHtml(el, str) {

var div = document.createElement('div');

div.innerHTML = str;

while (div.children.length > 0) {

el.appendChild(div.children[0]);

}

</div>

我相信這更接近您的需要？

反對回復 2023-12-11

呼啦一陣風

TA貢獻1802條經驗獲得超6個贊

您使用了正確的東西并且有點封閉...閱讀代碼并在有不清楚的地方添加評論。希望能幫助到你

let myButton = document.querySelector('#add-those-inputs');

myButton.addEventListener('click', event => { addInput(); });

let myPlaceholder = document.querySelector('.my-placeholder');

let addInput = function() {

let companyInputCounter = document.querySelectorAll('.my-company-input');

let inputWrapper = document.createElement('div');

let input = document.createElement('input');

input.classList.add('my-company-input');

input.type = 'text';

input.value = 'Company_' + companyInputCounter.length;

input.id = 'Company_' + companyInputCounter.length;

inputWrapper.appendChild(input);

myPlaceholder.appendChild(inputWrapper);

};

反對回復 2023-12-11

2 回答
0 關注
170 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用按鈕多次添加文本和輸入

如何使用按鈕多次添加文本和輸入

2 回答

添加回答