کم کردن عرض یک div هر دفعه که روی دکمه کلیک میکنیم با اعداد تصادفی
سلام چطور میتونم عرض یک div وقتی که هر دفعه روی دکمه کلیک میکنم کوچیکتر کنم با اعداد تصادفی. البته این کدمه که کار نمیکنه
let humanDiv = document.getElementById("humanDiv");
let monsterDiv = document.getElementById("monsterDiv");
function attBtn() {
let numRandom = Math.floor(Math.random() * 40) + 1;
humanDiv.style.width -= numRandom + 'px';
monsterDiv.style.width -= numRandom + 'px';
}
پاسخ‌ها
3
@saeidalaghehband
سلام. زیاد با js کار نکردم 😅 اما چندتا سرنخ که شاید راهگشا باشه:
احتمالا باید داخل کنسول مرورگرتون ارور داشته باشید.همیشه کنسول رو چک کنید.
و اینکه شما دارید یک مقدار استرینگ دریافت میکنید و خوب عملگر - روی استرینگ طبیعتا نباید کار کنه ( همونطوری که آقا میلاد گفتن). میتونید اول عرض مورد نظر رو بصورت عدد حساب کنید سپس مقدار موردنظر یا همون numRandom رو از عرض فعلی کم کنید و سپس اختصاص بدید به عرض المنتتون. مثلا:
let newWidth = parseInt(humanDiv.style.width) -= numRandom;
humanDiv.style.width = newWidth + 'px';تابع parseInt در واقع اون قسمت px رو ندیده میگیره و عدد بهتون تحویل میده.
در حالت قبلی شما داشتید اینطوری عمل میکردید که امکان پذیر نیست: ( عرض نمونه 300 پیکسل - عرض جدید 100 پیکسل)
300px - 100px // wrongامیدوارم منظورم رو متوجه شده باشید
مشکلتون اینجاست:
humanDiv.style.width -= numRandom + 'px';
monsterDiv.style.width -= numRandom + 'px';
سلام @saeidalaghehband
از اونجایی که متد Math.random() پرش داره یعنی بین اعداد اعشاری کوچک و بزرگ در حرکت است و منظم نیست ترجیح دادم از یک متغیر دیگه برای کنترل حرکت اعداد در جهت نزولی استفاده کنم که اسم متغیر i هست و مقدار اولیش رو عرض دایو قرار دادم.
let numRandom = i - Math.floor(Math.random() * 50);اگر مقدار Math.random() حداکثر خود باشد یعنی 0.9 که در 50 ضرب شود برابر با 45 خواهد و اگر i رو از 45 کم کنیم میشود چهارصدوپنجاه وپنج (نمیدونم چرا به عدد میزنم بجاش *** نشون میده) . پس من برای ایجاد گام مقدار i رو از 46 کم میکنم. که در ادامه که دوباره کلیک میکنیم وارد اعداد بالاتر از چهارصدوپنجاه وپنج نشویم.یعنی اینبار i = 454 خواهد. لازم به ذکره میزان گام حرکتی رو شما طبق سلیقه خودتون تغییر بدید.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>work</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div style="width: 500px; height: 500px; background-color: Green;" id="humanDiv"></div>
<button id="btn" style="padding: 10px 35px; background-color: aqua;">Click</button>
<script>
const humanDiv = document.getElementById("humanDiv");
const btn = document.getElementById("btn");
btn.addEventListener("click", resizing);
var i = 500;
function resizing() {
let numRandom = i - Math.floor(Math.random() * 50);
humanDiv.style.width = numRandom + "px";
i = i - 46;
}
</script>
</body>
</html>گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد