تحديث جزء محدد من صفحة HTML باستخدام جافا سكريبت
To achieve this, you can use JavaScript to update the var2 element conditionally. Instead of relying on the page refresh every 30 seconds, you can use a timer in JavaScript to update the element only when the condition is true. Here’s how you can modify your HTML file:
html<html>
<head>
<title>My sitetitle>
<meta http-equiv="refresh" content="30">
<style>
.value {
position: absolute;
border: 2px solid black;
text-align: center;
padding: 20px;
}
.head {
position: absolute;
}
style>
head>
<body>
<b class="value" style="left:920px;">{{ var1 }} %b>
<h3 id="text2" style="padding-left:860px;padding-top:200px;">Text 2: under me is the part I want to update only when the condition is trueh3>
<b id="var2" class="head" style="padding-left:900px;">{{ var2 }}b>
<script>
function updateVar2() {
var var2Element = document.getElementById('var2');
var text2Element = document.getElementById('text2');
var var2Value = {{ var2 }};
if (var2Value !== 0) {
var2Element.innerText = var2Value;
} else {
text2Element.innerText = "Text 2: under me is the part I want to update only when the condition is true";
}
}
setInterval(updateVar2, 30000); // Update every 30 seconds
script>
body>
html>
In this modified code, JavaScript checks the value of var2 every 30 seconds. If var2 is not equal to 0, it updates the element with id="var2" with the new value of var2. Otherwise, it keeps the original text in the h3 element with id="text2".
المزيد من المعلومات
بالطبع! يمكنك استخدام جافا سكريبت لتحديث العنصر var2 بشكل مشروط. بدلاً من الاعتماد على تحديث الصفحة كل 30 ثانية، يمكنك استخدام مؤقت في جافا سكريبت لتحديث العنصر فقط عندما تكون الشرط صحيحًا. إليك كيفية تعديل ملف HTML الخاص بك:
html<html>
<head>
<title>My sitetitle>
<meta http-equiv="refresh" content="30">
<style>
.value {
position: absolute;
border: 2px solid black;
text-align: center;
padding: 20px;
}
.head {
position: absolute;
}
style>
head>
<body>
<b class="value" style="left:920px;">{{ var1 }} %b>
<h3 id="text2" style="padding-left:860px;padding-top:200px;"> Text 2: under me is the part I want to update only when the condition is trueh3>
<b id="var2" class="head" style="padding-left:900px;">{{ var2 }}b>
<script>
function updateVar2() {
var var2Element = document.getElementById('var2');
var text2Element = document.getElementById('text2');
var var2Value = {{ var2 }};
if (var2Value !== 0) {
var2Element.innerText = var2Value;
} else {
text2Element.innerText = "Text 2: under me is the part I want to update only when the condition is true";
}
}
setInterval(updateVar2, 30000); // Update every 30 seconds
script>
body>
html>
في هذا الكود المعدل، يقوم جافا سكريبت بفحص قيمة var2 كل 30 ثانية. إذا كانت var2 ليست تساوي صفر، يقوم بتحديث العنصر الذي يحمل الهوية “var2” بالقيمة الجديدة لـ var2. في حال كانت تساوي صفر، يحتفظ بالنص الأصلي في العنصر h3 الذي يحمل الهوية “text2”.