سلام چطور میتونم عرض یک 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';
}
@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>
@saeidalaghehband
سلام. زیاد با js کار نکردم 😅 اما چندتا سرنخ که شاید راهگشا باشه:
احتمالا باید داخل کنسول مرورگرتون ارور داشته باشید.همیشه کنسول رو چک کنید.
و اینکه شما دارید یک مقدار استرینگ دریافت میکنید و خوب عملگر - روی استرینگ طبیعتا نباید کار کنه ( همونطوری که آقا میلاد گفتن). میتونید اول عرض مورد نظر رو بصورت عدد حساب کنید سپس مقدار موردنظر یا همون numRandom رو از عرض فعلی کم کنید و سپس اختصاص بدید به عرض المنتتون. مثلا:
let newWidth = parseInt(humanDiv.style.width) -= numRandom;
humanDiv.style.width = newWidth + 'px';
تابع parseInt در واقع اون قسمت px رو ندیده میگیره و عدد بهتون تحویل میده.
در حالت قبلی شما داشتید اینطوری عمل میکردید که امکان پذیر نیست: ( عرض نمونه 300 پیکسل - عرض جدید 100 پیکسل)
300px - 100px // wrong
امیدوارم منظورم رو متوجه شده باشید
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟