استفاده از input-number
درود بر دوستان
کسی است در زمینه جاوا اسکریپ کمکم کنه ؛ چطور میتونم کد جاوااسکریپت این صفحه را درست کنم (در حال یادگیری جاوا اسکریپت)
با تشکر
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
این یه مثال ساده با لیست آیتم هست
که میتونی ادیتش کنی و به همون کد برسی
<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 بگیری و نمایش بدی
باید event یا رویداد onchange رو در اون input مدیریت کنی
همچنین به یه container برای نمایش پست ها احتیاج داری
هر وقت تعداد گزینه های داخل Input تغییر کرد
اول داده های container رو پاک میکنی
تعداد پست ها رو از Input میگیری
و به همون دفعات یه سری کد های html رو به container اضافه میکنی
@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="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>این یه مثال ساده با لیست آیتم هست
که میتونی ادیتش کنی و به همون کد برسی
<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 بگیری و نمایش بدی