سعید علاقه بند
4 سال پیش توسط سعید علاقه بند مطرح شد
3 پاسخ

کم کردن عرض یک 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';
}

ثبت پرسش جدید
سبحان دادخواه
تخصص : دانشجوی برنامه نویسی :)
@SobhanDadkhah 4 سال پیش مطرح شد
1

@saeidalaghehband
سلام. زیاد با js کار نکردم 😅 اما چندتا سرنخ که شاید راهگشا باشه:
احتمالا باید داخل کنسول مرورگرتون ارور داشته باشید.همیشه کنسول رو چک کنید.
و اینکه شما دارید یک مقدار استرینگ دریافت میکنید و خوب عملگر - روی استرینگ طبیعتا نباید کار کنه ( همونطوری که آقا میلاد گفتن). میتونید اول عرض مورد نظر رو بصورت عدد حساب کنید سپس مقدار موردنظر یا همون numRandom رو از عرض فعلی کم کنید و سپس اختصاص بدید به عرض المنتتون. مثلا:

let newWidth = parseInt(humanDiv.style.width) -= numRandom;
humanDiv.style.width = newWidth + 'px';

تابع parseInt در واقع اون قسمت px رو ندیده میگیره و عدد بهتون تحویل میده.
در حالت قبلی شما داشتید اینطوری عمل میکردید که امکان پذیر نیست: ( عرض نمونه 300 پیکسل - عرض جدید 100 پیکسل)

300px - 100px  // wrong

امیدوارم منظورم رو متوجه شده باشید


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش آپدیت شد
-1

مشکلتون اینجاست:

  humanDiv.style.width -= numRandom + 'px';
  monsterDiv.style.width -= numRandom + 'px';

markazfa
@markazfa 4 سال پیش مطرح شد
1

سلام @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>

سبحان دادخواه
تخصص : دانشجوی برنامه نویسی :)
@SobhanDadkhah 4 سال پیش مطرح شد
1

@saeidalaghehband
سلام. زیاد با js کار نکردم 😅 اما چندتا سرنخ که شاید راهگشا باشه:
احتمالا باید داخل کنسول مرورگرتون ارور داشته باشید.همیشه کنسول رو چک کنید.
و اینکه شما دارید یک مقدار استرینگ دریافت میکنید و خوب عملگر - روی استرینگ طبیعتا نباید کار کنه ( همونطوری که آقا میلاد گفتن). میتونید اول عرض مورد نظر رو بصورت عدد حساب کنید سپس مقدار موردنظر یا همون numRandom رو از عرض فعلی کم کنید و سپس اختصاص بدید به عرض المنتتون. مثلا:

let newWidth = parseInt(humanDiv.style.width) -= numRandom;
humanDiv.style.width = newWidth + 'px';

تابع parseInt در واقع اون قسمت px رو ندیده میگیره و عدد بهتون تحویل میده.
در حالت قبلی شما داشتید اینطوری عمل میکردید که امکان پذیر نیست: ( عرض نمونه 300 پیکسل - عرض جدید 100 پیکسل)

300px - 100px  // wrong

امیدوارم منظورم رو متوجه شده باشید


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

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