مهرداد
3 سال پیش توسط مهرداد مطرح شد
2 پاسخ

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

سلام دوستان من این شکلی بصورت جاوا اسکریپت خام با زدن روی دکمه سه تا اینپوت با سه تا نام مختلف میسازم این کد بهینه نیست چطوری میتونم کد بخش جاوا اسکریپت رو بصورتی هندل کنم که فقط یکبار بنویسمش ولی با زدن روی دکمه سه تا اینپوت با سه اسم و ایدی و 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>

ثبت پرسش جدید
عبدالرحمان کیانی
تخصص : Backend developer
@abdolrahman 3 سال پیش مطرح شد
0

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

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

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


مهرداد
@mehrdadroshanraee69 3 سال پیش مطرح شد
0

@ad.kiany.2009

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


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام