تغيير نص الفقرة باستخدام JavaScript
بمجرد تفحص الشيفرة التي قدمتها، يتضح أن هناك بعض الأخطاء التي تسبب في ظهور النص “undefined”. دعني أشرح لك الأخطاء وكيفية إصلاحها.
أولًا، عندما تستخدم document.getElementById("demo").value()، فإنك تحاول الوصول إلى خاصية value من عنصر
، وهذا غير صحيح لأن العنصر
لا يملك خاصية value. بدلاً من ذلك، يمكنك استخدام innerHTML للوصول إلى نص داخل العنصر.
ثانيًا، عندما تستخدم document.getElementById("demo").innerHTML = "Hello World";، فإنك تغير نص العنصر
الذي يحمل id “demo” إلى “Hello World”، ولكنك لم تقم بتحديث قيمة len بنفس القيمة. لذا سيتم عرض “undefined” لأن len لم يتم تعيينه بعد.
لتصحيح هذه الأخطاء، يمكنك تغيير الشيفرة كما يلي:
htmlhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<p id="demo">Click the button to change the text in this paragraph.p>
<button onclick="myFunction()">Try itbutton>
<p id="para">p>
<script>
var len;
function myFunction() {
// استخدم innerHTML بدلاً من value للحصول على نص العنصر
len = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = "Hello World";
document.getElementById("para").innerHTML = len;
}
script>
body>
html>
باستخدام هذا التعديل، عند النقر على الزر “Try it”، سيتم تغيير نص الفقرة الأولى إلى “Hello World”، وسيتم عرض قيمة len في العنصر
الثاني.
المزيد من المعلومات
بالطبع، سأقدم لك المزيد من المعلومات حول الأمور التي تحتاج لإلقاء الضوء عليها فيما يتعلق بشيفرة الجافا سكريبت التي قدمتها.
أولاً، دعنا نتناول دالة document.getElementById()، التي تستخدم للعثور على عنصر في صفحة HTML باستخدام الهوية (ID) التي تعيينها لهذا العنصر. وهي دالة مهمة جداً في جافا سكريبت لأنها تمكنك من التفاعل مع عناصر HTML وتغيير محتواها أو خصائصها.
ثانياً، الفرق بين innerHTML و value:
innerHTML: تُستخدم للوصول إلى محتوى العنصر HTML بين علامات البداية والنهاية، ويمكن استخدامها لتغيير النص أو الهيكل الداخلي للعنصر.value: تُستخدم بشكل رئيسي مع عناصر إدخال مثلأو
