في البداية، يبدو أنك تسعى لتحقيق وظيفة بسيطة ولكنها مهمة على موقع الويب الخاص بك. تريد تحديث عنصر
-
-
-
في صفحتك باستمرار وبناءً على إدخال المستخدم. يمكن أن يتم تحقيق هذا باستخدام لغة البرمجة جافا سكريبت، ولكن دون الحاجة إلى استخدام نظام قواعد البيانات (PHP) أو أي أسلوب متقدم.
للقيام بذلك، يمكنك استخدام الكود التالي:
htmlhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Contenttitle>
head>
<body>
<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><form id="contentForm">
<input type="text" id="contentInput" style="font-size: 25px" placeholder="Name of content">
<input type="button" value="Submit" onclick="updateContent()">
</form>
<p id="displayContent"></p>code>pre>
div>
div>
<script>
// JavaScript code to update the tag with user input
function updateContent() {
var userInput = document.getElementById('contentInput').value;
document.getElementById('displayContent').innerText = userInput;
// You can use localStorage to store the content and retrieve it on page reload
localStorage.setItem('userContent', userInput);
}
// Check if there is stored content and display it on page load
var storedContent = localStorage.getItem('userContent');
if (storedContent) {
document.getElementById('displayContent').innerText = storedContent;
}
script>
body>
html>
هذا الكود يستخدم جافا سكريبت للتفاعل مع الصفحة وتحديث عنصر
باستمرار وفقًا لإدخال المستخدم. يقوم الكود أيضًا بتخزين المحتوى في localStorage لضمان استمراريته بين عمليات إعادة تحميل الصفحة.
عند استخدام هذا الكود، ستتمكن من إنشاء صفحة ويب حيث يمكن للمستخدمين إدخال محتوى في حقل النص، وسيتم عرض هذا المحتوى تحت العنصر
، وسيتم الاحتفاظ به باستمرار حتى بعد إعادة تحميل الصفحة.
المزيد من المعلومات
بالطبع، دعوني أقدم لك تفصيل إضافي حول الكود وكيف يعمل.
-
نموذج الاستمارة:
في البداية، يتم إنشاء نموذج استمارة HTML باستخدام العنصر -
تحديث المحتوى باستخدام JavaScript:
يتم استخدام كود جافا سكريبت للتفاعل مع العناصر على الصفحة. يتم استخدام وظيفةupdateContent()لجلب قيمة المحتوى من حقل الإدخال (contentInput) وتحديث نص العنصر(displayContent). بالإضافة إلى ذلك، يتم استخدامlocalStorageلتخزين المحتوى بحيث يمكن الاحتفاظ به حتى بعد إعادة تحميل الصفحة. -
استرجاع المحتوى عند إعادة تحميل الصفحة:
يتم استخدام كود آخر في الجزء السفلي من الصفحة للتحقق من وجود محتوى مخزن فيlocalStorage. إذا كان هناك محتوى، فإنه يتم عرضه في العنصرعند تحميل الصفحة، مما يضمن استمرار توفر المحتوى حتى بعد إغلاق المتصفح. -
تطبيق بدون استخدام قاعدة البيانات:
يلاحظ أن هذا الكود لا يتطلب استخدام قاعدة بيانات. بدلاً من ذلك، يعتمد على تخزين المحتوى المدخل من قبل المستخدم فيlocalStorageالذي يتيح لك الحفاظ على البيانات بشكل محلي دون الحاجة إلى خوادم أو قواعد بيانات.
باستخدام هذا الكود، يمكنك إنشاء صفحة ويب بسيطة وديناميكية تسمح للمستخدمين بتحديث عنصر
بمحتوى من اختيارهم والاحتفاظ به حتى بعد إعادة تحميل الصفحة.
