آشنایی با تابع getElementById در جاوااسکریپت

ابتدا ابزارهای HTML‌ را ایجاد می کنیم و با id نامی برای آنها تعیین می کنیم.

<input type="text" name="txt1" id="txt2"/>

همانطوریکه مشاهده می شود txt2 نامی است که برای یک کادر متنی لحاظ شده است. سپس برای دستیابی به آن از کد زیر استفاده می شود:

var a=Number(document.getElementById("txt1").value);

کد بالا یک کد جاوااسکریپت است که محتوای کادر متنی با id که txt1 است تعلق گرفته است را در a قرار می دهد.

مثال: صفحه وبی طراحی کنید که دو کادر متنی دارد و مجوع مقادیرشان با کلیک بر یک دکمه در کادر متنی سوم قرار می گیرد:

<head>
    <meta charset="utf-8">
    <title>کادر تایید</title>
</head>
<body bgcolor="#ffeedd">
 <center>
    <script type="text/javascript">
        function product(){
            
            var a=Number(document.getElementById("txt1").value);
            var b=Number(document.getElementById("txt2").value);
            document.getElementById("txt3").value=a+b;

        }
    </script>

    قیمت محصول اول
    <br/>
    
    <input type="text" name="txt1" id="txt1"/>
    <br/>
    <br/>
    قیمت محصول دوم
    <br/>
    
    <input type="text" name="txt2" id="txt2"/>
    <br/>
    <br/>
    قیمت کل
    <br/>
   
    <input type="text" name="txt3" id="txt3"/>
    <br/>
    <br/>
    <input type="button" name="button" value="نمایش محصولات" onclick="product()"/>
</center>
</body>