حل شده

استفاده از input-number

درود بر دوستان
کسی است در زمینه جاوا اسکریپ کمکم کنه ؛ چطور میتونم کد جاوااسکریپت این صفحه را درست کنم (در حال یادگیری جاوا اسکریپت)
با تشکر

جاوااسکریپت جاوا_اسکریپت

Banana Life

5 سال پیش@shift.delete

ثبت پرسش جدید

پاسخ‌ها

علی بیات

@ali.bayat5 سال پیش مطرح شد

تخصص: توسعه دهنده ارشد وب

بهترین پاسخ

این یه مثال ساده با لیست آیتم هست
که میتونی ادیتش کنی و به همون کد برسی

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>

<body>
    <header class="flx-row">
        <div class="clum">
            <label for="number" for="input-number">Number of Posts</label>
            <input id="mynumber" type="number" placeholder="0">
        </div>
    </header>
    <ul id="main">

    </ul>

    <script>
        let post_number = document.getElementById("mynumber")
        post_number.addEventListener("change", function() {
            refreshElements();
        });

        function refreshElements() {
            let main = document.querySelector("#main")
            let number = document.querySelector("#mynumber").value
            main.innerHTML = '';

            for (let i = 1; i <= number; i++) {
                let node = document.createElement("LI");
                let textnode = document.createTextNode(`Panda number ${i}`);
                node.appendChild(textnode);
                document.getElementById("main").appendChild(node);
            }
        }
    </script>
</body>

</html>

اما تو سناریو های واقعی باید بر اساس mynumber یه سری داده رو با درخواست Ajax بگیری و نمایش بدی

ارسال پاسخ

علی بیات

@ali.bayat5 سال پیش مطرح شد

تخصص: توسعه دهنده ارشد وب

باید event یا رویداد onchange رو در اون input مدیریت کنی
همچنین به یه container برای نمایش پست ها احتیاج داری

هر وقت تعداد گزینه های داخل Input تغییر کرد
اول داده های container رو پاک میکنی
تعداد پست ها رو از Input میگیری
و به همون دفعات یه سری کد های html رو به container اضافه میکنی

ارسال پاسخ

Banana Life

@shift.delete5 سال پیش مطرح شد

@ali.bayat
`ممنون از جواب و راهنمایتان و میتونید یه نگاهی به کدی که نوشتم بکنید و کجاهایش باید تغییر بدم تا به نتیجه برسم. تشکر
کد خود را اینجا وارد کنید


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://roocket.ir/css/style.css">
    <script src="scripts.js"></script>

    <title>Document</title>
</head>
<body>

    <header class="flx-row">

    <div> 
        <h1>Home</h1>            
    </div>
    <div class="clum">
        <label for="number" for="input-number">Number of Posts</label>
        <input id="mynumber" type="number" placeholder="0" > 
    </div>
   </header>
    <main id="main">

    </main>
    <script>

     function mysection(elem) {
     let elme = document.querySelector("#mynumber");
     for (var i = 0; i < elem; i++) {
            var q = document.querySelector("main");
            var s = document.createElement("section");
            var h = document.createElement("h1");
            var p = document.createElement("p");

            h.innerHTML = "Panda"+i;
            p.innerHTML = "The panda...";

            q.append(s);
            s.append(h);
            s.append(p);
        }
    }

    </script>
</body>
</html>

ارسال پاسخ

شاید پاسخ شما همین‌جا باشد