0

سؤال في جافاسكريبت

السلام عليكم

انا قاعد اسوي برنامج بلغه جافاسكريبت 

واحتاج كود او مكتبه فيها كود زي innerHTML بس لما اكتب الكود مرتين ماينحذف محتوى الاول

مثال:

var div = document.getElementById("div");
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.addEventListener("click",()=>{ div.innerHTML="<p>test1</p>";});
button2.addEventListener("click",()=>{ div.innerHTML="<p>test2</p>";});

زي ما تشوفون حطيت كود addEventListener في البدايه لما ينضغط الزر الاول

وحطيت الكود مره ثانيه للزر الثاني بس لما اضغط الزر الثاني يصير محتوى div من test1 الى test2

وانا ابي يصير من test1 الى test1test2

في حل للمشكله؟

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

0
SamAhw أضف ردا

بما أن المحتوى الذي تريد جمعه هو محتوى نصي، يمكنك استخدام textContent بدلاً من innerHtml:

<p id="myParagraph"></p>

var p = document.getElementById("myParagraph");
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.addEventListener("click",()=>{ p.textContent="test1";});
button2.addEventListener("click",()=>{ p.textContent +=" test2";});

<p>test1</p> //عند الضغط على الزر الأول
<p>test1 test2</p> //عند الضغط على الزر الثاني
0
Adnane_Kadri أضف ردا

لتجنب هذا ستحتاج اولا تخزين القيمة الفعلية في متغير قبل اسناد قيمة جديدة. حيث ان هاته القيمة الجديدة ستكون دمج السلسلتين النصيتين : القيمة الجديدة + القيمة القديمة.

فيما يلي مثال عن طريق الجيكويري: 

<h1> Io.Hsoub </h1>
<button>Click</button>

و: 

var item = jQuery('h1');
var button = jQuery('button');


button.on('click' ,function(){
    item.text(item.text() + 'Is cool');
});

وبنفس المنطق يمكنك توظيفها في المثال الذي لديك.

مثال حي: https://jsfiddle.net/461ob2...

0
moragib أضف ردا

اذا كنت لاتريد مسح المحتوى السابق عليك اضافة النص الجديد اليه بوضع علامة + قبل علامة =

كالتالي:

div.innerHTML +="<p>test2</p>";