حل شده

ساختن اینپوت با جاوا اسکریپت

سلام دوستان من این شکلی بصورت جاوا اسکریپت خام با زدن روی دکمه سه تا اینپوت با سه تا نام مختلف میسازم این کد بهینه نیست چطوری میتونم کد بخش جاوا اسکریپت رو بصورتی هندل کنم که فقط یکبار بنویسمش ولی با زدن روی دکمه سه تا اینپوت با سه اسم و ایدی و placeholder و کلا با اون مشخصات که نوشتم ایجاد بشه

    function createInput(){

        let inputs = document.createElement(html)
        inputs.setAttribute('lable' , 'Attribute');
        inputs.setAttribute('type' , 'text');
        inputs.setAttribute('id' , 'attributes');
        inputs.setAttribute('class' , 'form-control');
        inputs.setAttribute('name' , 'attributes[]');
        inputs.setAttribute('placeholder' , 'attribute ...');
        document.querySelector('#input1').append(inputs)

        let inputs2 = document.createElement('INPUT');
        inputs2.setAttribute('type' , 'text');
        inputs2.setAttribute('id' , 'values');
        inputs2.setAttribute('class' , 'form-control');
        inputs2.setAttribute('name' , 'values[]');
        inputs2.setAttribute('placeholder' , 'value ...');
        document.querySelector('#input2').appendChild(inputs2)

        let inputs3 = document.createElement('INPUT');
        inputs3.setAttribute('type' , 'text');
        inputs3.setAttribute('id' , 'units');
        inputs3.setAttribute('class' , 'form-control');
        inputs3.setAttribute('name' , 'units[]');
        inputs3.setAttribute('placeholder' , 'unit ...');
        document.querySelector('#input3').appendChild(inputs3)

    }

<button class="btn btn-success" type="button" onclick="createInput()">Add Attribute</button>

پاسخ‌ها

Ibo Kiani

@abdoki77884 سال پیش مطرح شد

تخصص: Backend developer

بهترین پاسخ

روش من که اینه که البته به نظرم اصولی هم هست.

<button onclick="createInput()">click me!!</button>
<div id="input1"></div>
<div id="input2"></div>
<div id="input3"></div>
<script>
    var inputsData = [
        {id:'attributes', placeholder:'attribute ...', _name: 'attributes[]'},
        {id:'values', placeholder:'value ...', _name: 'values[]'},
        {id:'units', placeholder:'unit ...', _name: 'units[]'}
    ]
    function createInput(){
        for(var i = 0 ; i < 3 ; i++) {
            let inputs = document.createElement('input')
            inputs.setAttribute('type' , 'text');
            inputs.setAttribute('id' , inputsData[i].id);
            inputs.setAttribute('class' , 'form-control');
            inputs.setAttribute('name' , inputsData[i]._name);
            inputs.setAttribute('placeholder' , inputsData[i].placeholder);
            document.querySelector('#input' + String(i+1) ).append(inputs)
        }
    }
</script>

اگه مفید بود بهترین پاسخ رو بزنید که بشه اولیم :)

ارسال پاسخ

مهرداد

@mehrdadroshanraee694 سال پیش مطرح شد

@ad.kiany.2009

والا جواب داد ممنون اگه دوستان روش بهتری هم داشته باشن عالی میشه اما چون جواب داد بهترین پاسخ مال شما

ارسال پاسخ