افزودن باکس با جاوا اسکریپت
سلام دوستان وقت بخیر فرض بفرمایید من همچین چیزی دارم:
<form action="#" class="main">
<div>f</div>
<div>f</div>
<div>f</div>
</form>
<a href="#">click</a>میخوام وقتی روی لینک کلیک میشود دو دایو دیگر در همون فرم اضاف شود البته موفق به انجام این کار با insertAdjacentHTML شدم ولی میخوام محدودش کنم یعنی بیشتر از 2 باکس اضاف نکنه چیکار باید بکنم ؟ ممنون میشم پاسخ بدید
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
باید با createElement و appendChild این کارو انجام بدی. برای محدود کردنش هم باید یه if و یه متغیر قرار بدی
مثلا یه a داریم بهش آیدی btn و میخوایم وقتی روش کلیک شد اون div ها اضافه بشن به form و به خود فرم آیدی form دادیم.
اگه منظورت اینکه با هر کلیک یه div اضافه بشه:
const btn = document.getElementById('btn');
const form = document.getElementById('form');
const div = document.createElement('div');
var createdBoxes = 0;
btn.addEventListener('click', function(e){
if(createdBoxes < 2){
form.appendChild(div);
createdBoxes++;
}
e.preventDefault();
});اگه قرار با یه کلیک دو تا باکس اضافه بشه:
const btn = document.getElementById('btn');
const form = document.getElementById('form');
const div = document.createElement('div');
var clicked = false;
btn.addEventListener('click', function(e){
if(! clicked){
form.appendChild(div);
form.appendChild(div);
clicked = true;
}
e.preventDefault();
});رو تگ a هم preventDefault اعمال کردیم تا مثل لینک عمل نکنه
آموزش document.createElement
آموزش preventDefault
داداش این دایو که نوشتم مثال بود ولی شما در نظر داشته باش این دایو ها استایل و محتوای خاصی دارن اونارو چیکار کنم چطوری نمایش بدم ؟
استایل کلی اینطوریه :
<div class="mat-box">
<div class="mat-box-top">
<a href="#" class="mat-btn" onclick="toggle()"><span>مواد</span></a>
<a href="#" class="rounded-red" onclick="del()"><i class="fa fa-multiply"></i></a>
</div>
<div class="mat-box-body">
<input class="mat-equal sum1" type="text" name="sum_1" id="matvalue" placeholder="0">
<div class="rounded-green"><i class="fa fa-equals"></i></div>
<input class="mat-price price1" onchange="sum()" type="text" name="price_1"
id="matvalue" placeholder="مقدار تومان">
<div class="rounded-green"><i class="fa fa-plus"></i></div>
<input class="mat-kg kg1" type="text" name="kg_1" id="matvalue" placeholder="KGمقدار">
<div class="divide"><span>0%</span></div>
</div>
</div>در این صورت باید به Div قبل اینکه Append کنی به فرم InnerHTML بدی. و با classList.Add به div class رو اضافه کنی.
کد قبلی رو با این کد جایگزین کن
const btn = document.getElementById('btn');
const form = document.getElementById('form');
const div = document.createElement('div');
div.classList.add('mat-box');
div.innerHTMl = '
<div class="mat-box-top">
<a href="#" class="mat-btn" onclick="toggle()"><span>مواد</span></a>
<a href="#" class="rounded-red" onclick="del()"><i class="fa fa-multiply"></i></a>
</div>
<div class="mat-box-body">
<input class="mat-equal sum1" type="text" name="sum_1" id="matvalue" placeholder="0">
<div class="rounded-green"><i class="fa fa-equals"></i></div>
<input class="mat-price price1" onchange="sum()" type="text" name="price_1"
id="matvalue" placeholder="مقدار تومان">
<div class="rounded-green"><i class="fa fa-plus"></i></div>
<input class="mat-kg kg1" type="text" name="kg_1" id="matvalue" placeholder="KGمقدار">
<div class="divide"><span>0%</span></div>
</div>
';
var clicked = false;
btn.addEventListener('click', function(e){
if(! clicked){
form.appendChild(div);
form.appendChild(div);
clicked = true;
}
e.preventDefault();
});