ایجاد المان

Printable View

شنبه 11 اسفند 1403, 07:32 صبح
Akuser

ایجاد المان

سلام وقت بخیر
میخواهم پارامترتابع createElement ازطریق یک لیست کشویی انتخاب شود مثلا یک پاراگراف و همینطور متن آن که ازطریق تابع createTextNodاضافه میشود نیز ازطریق یک ورودی متنی وارد شود و به عنوان پارامتر این تابع باشد.
یک شنبه 12 اسفند 1403, 14:31 عصر
mazoolagh

نقل قول: ایجاد المان

سلام و روز خوش
کد html فعلی رو بگذارین (اینجا یا در یک فیدل)،
روی همون توضیح میدم.
چهارشنبه 15 اسفند 1403, 05:48 صبح
Akuser

نقل قول: ایجاد المان
کد HTML:

var container=document.getElementById("content"); <select id="opCreate"> <option value="p">p</option> <option value="h1">h1</option> <option value="p">a</option> <option value="span">span</option> </select> <input type="text" id="valC"> <button type="button" onclick="createElem()">ایجاد</button> <div id="content"> <div/>
```
var container=document.getElementById("content");

function createElem()

{

    let opC=document.getElementById("opCreate").value;

let valC=document.getElementById("valC").value;

    let elem=document.createElement(opc);

    let node=document.createTextNode(valc);

    elem.appendChild(node);

    container.appendChild(elem);

    document.body.appendChild(elem);

}
```

نقل قول: ایجاد المان

این کد چند اشکال داره:

1- وقتی خط زیر اجرا میشه:
var container=document.getElementById("content");
هنوز dom رِندِر نشده بنابراین content هنوز ناشناخته است،
و در نتیجه container هم undefined هست.

2- جاوااسکریپت case sensitive هست
بنابراین valc و valC با هم یکی نیستن در نتیجه 2 خط زیر هم نادرست هست:
let elem=document.createElement(opc);

let node=document.createTextNode(valc);
3- کد زیر هم که کلا باید پاک بشه چون بی معنی هست:
document.body.appendChild(elem);
پس باید کد مورد شماره 1 زمانی اجرا بشه که همه داکیومنت خونده و لود شده باشه،
برای همین باید اون رو در انتهای داکیومنت بذارین.
همه داکیومنت رو پیوست میکنم تا بهتر متوجه بشین:
<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>barnamenevis 591830</title>

    <script>

        function createElem() {

            let opC = document.getElementById("opCreate").value;

            let valC = document.getElementById("valC").value;

            let elem = document.createElement(opC);

            let node = document.createTextNode(valC);

            elem.appendChild(node);

            container.appendChild(elem);

        }     

    </script>

</head>



<body>

    <select id="opCreate">

        <option value="p">paragraph</option>

        <option value="h1">header 1</option>

        <option value="a">anchor</option>

        <option value="span">span</option>

    </select>

    <input type="text" id="valC">

    <button type="button" onclick="createElem()">ایجاد</button>

    <div id="content"></div>

    <script>

            const container = document.getElementById("content");

    </script>

</body>



</html>

نقل قول: ایجاد المان

اما اینجا شما نیازی به تعریف container به صورت گلوبال ندارین
بنابراین میتونین کد رو به شکل زیر هم بنویسین:

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>barnamenevis 591830</title>

    <script>

        function createElem() {

            const opCreateValue = document.getElementById("opCreate").value;

            const valCValue = document.getElementById("valC").value;

            const elem = document.createElement(opCreateValue);

            const textnode = document.createTextNode(valCValue);

            elem.appendChild(textnode);

            document.getElementById("content").appendChild(ele  m);

        }     

    </script>

</head>



<body>

    <select id="opCreate">

        <option value="p">paragraph</option>

        <option value="h1">header 1</option>

        <option value="a">anchor</option>

        <option value="span">span</option>

    </select>

    <input type="text" id="valC">

    <button type="button" onclick="createElem()">ایجاد</button>

    <div id="content"></div>

</body>



</html>

نقل قول: ایجاد المان

به دلائل زیادی بهتر هست که بجای آوردن eventها بعنوان attribute المان (مثل همین onclick)
از addEventListener استفاده کنین:

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>barnamenevis 591830</title>

    <script>

        document.addEventListener('DOMContentLoaded', () => {

            const combo = document.querySelector("#opCreate");

            const textbox = document.querySelector("#valC");

            const button = document.querySelector("#btn");

            const div=document.querySelector("#content");

            

            btn.addEventListener('click', () => {

                const elem = document.createElement(combo.value);

                const textnode = document.createTextNode(textbox.value);

                elem.appendChild(textnode);

                div.appendChild(elem);

            });

        });

    </script>

</head>



<body>

    <select id="opCreate">

        <option value="p">paragraph</option>

        <option value="h1">header 1</option>

        <option value="a">anchor</option>

        <option value="span">span</option>

    </select>

    <input type="text" id="valC">

    <button type="button" id="btn">ایجاد</button>

    <div id="content"></div>

</body>



</html>

اینجا از رخداد DOMContentLoaded داکیومنت استفاده کردیم
که در اون مطمئن هستیم همه dom رندر شده و در دسترس هست،
و در این رخداد برای button یک eventlistener برای click تعریف کردیم.