محرر ويب أونلاين

<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript Prompt Dialog Box</h1>
    <p>Click on the button to display a prompt dialog box.</p>
    <button id="btn">Show Prompt Dialog</button>
    <p id="result"></p>
    
    <script>
        // btn في متغير إسمه btn يساوي id هنا قمنا بتخزين العنصر الذي يملك
        var btn = document.getElementById('btn');

        // result في متغير إسمه result يساوي id هنا قمنا بتخزين العنصر الذي يملك
        var result = document.getElementById('result');

        // btn هنا قمنا بتحديد ما سيحدث عند النقر على الزر الذي يمثله المتغير
        btn.addEventListener('click', () => {
            // text أولاً سيتم إظهار نافذة لإدخال قيمة و عند إغلاقها سيتم تخزين القيمة في المتغير 
            let text = prompt('Leave a review', 'I like it!');

            // result فهذا يعني أنه نقر على زر الرجوع و سيتم وضع نص يشير لذلك في العنصر null تساوي text إذا كانت قيمة
            if(text == null) {
               result.innerHTML = 'You clicked CANCEL';
            }
            // result عبارة عن نص فارغ فهذ يعني أنه نقر على زر الموافقة و لكنه لم يدخل أي قيمة و سيتم وضع نص يشير لذلك في العنصر text إذا كانت قيمة
            else if(text == '') {
               result.innerHTML = 'You clicked OK, but you did not enter any text.';
            }
            // result إذا لم يتحقق أي شرط سابق فهذا يعني أن المستخدم قام بإدخال قيمة و سيتم عرضها في العنصر
            else {
               result.innerHTML = text;
            }
        });
    </script>
</body>
</html>