قراءة قيمة حقل إدخال من خاصية value في جافاسكربت يعطي خطأ و undefined

أرجو تجريب الشيفرة بنفسك، ثم يمكننا مساعدتك على حل المشكلات

أرجو إرفاق جميع الشيفرات ضمن محرر الأكودا (يمكنك إرفاق الملفات أيضاً)

بتاريخ 14 دقائق مضت قال Aseel Hanoona:

اين الخلل في هذا الكود حيث تظهر القيمة غير معرفة 

أرجو تعديل اسم خاصية القيمة لتبدأ بحرف v صغير بدل الكبير

document.getElementById("tweet-text").value;  
                                     ^^^

وتأكدي من تطابق المعرف id وألا يحوي على فراغات في شيفرة HTML

addEventListener يستقل الدالة كوسيط، أي لا نقوم باستدعائها فيه بل فقط نكتب اسمها ليتم تمرير الدالة وليس قيمة استدعائها

btn.document.getElementById('tweetbtn').addEventListener("onclick", createTweet())
                                                                    ^^^^^^^^^^^
btn.document.getElementById('tweetbtn').addEventListener("onclick", createTweet)
                                                                     ^^^^^^^^^^^

وطالما قمت بتعريف متغير يحمل مرجع للزر يمكن تجاهل عمل استعلام جديد get element ..

const btn=document.getElementById('tweetbtn') 

btn.addEventListener("onclick", createTweet)

const btn=document.getElementById('tweetbtn') 
btn.document.getElementById('tweetbtn').addEventListener("click", createTweet())
btn.document.getElementById('tweetbtn').addEventListener("click", save)


function createTweet(){
    var tweet = document.getElementById("tweet-text").Value;
    
    document.getElementById('tweettext').innerHTML = tweet;
    document.getElementById('feed-tweet1').style.display= 'flex';

} 
const save=()=>{
    localStorage.setItem('textinput',text.textContent)
}

فعلت كما قلت وتظهر  غير معرفة رغم ذلك

بتاريخ 4 دقائق مضت قال Aseel Hanoona:

فعلت كما قلت وتظهر  غير معرفة رغم ذلك

لا أرى التعديلات في هذه الشيفرة

يمكنك إرفاق الملفات المرتبطة بالمشكلة لتجريبهم بشكل أفضل

  const inp =document.getElementById("tweet-text");
  const tweet =document.getElementById("tweettext");
  let feedtweet = document.getElementById("feedtweet1");
  let btn = document.getElementById("tweetbtn");

 document.addEventListener('click', btn.onclick = function createTweet(){
    let newtweet = feedtweet.cloneNode(true);
    newtweet.className ="newtweet";
    document.getElementById("newtweety").appendChild(newtweet);
    tweet.innerHTML = inp.value;

    
    document.getElementsByClassName('feed-tweet1').style.display='flex';
    
});

لماذا لا يكرر فقط عند النقر على الزر ؟

index.rar

بتاريخ 41 دقائق مضت قال Aseel Hanoona:

  const inp =document.getElementById("tweet-text");
  const tweet =document.getElementById("tweettext");
  let feedtweet = document.getElementById("feedtweet1");
  let btn = document.getElementById("tweetbtn");

 document.addEventListener('click', btn.onclick = function createTweet(){
    let newtweet = feedtweet.cloneNode(true);
    newtweet.className ="newtweet";
    document.getElementById("newtweety").appendChild(newtweet);
    tweet.innerHTML = inp.value;

    
    document.getElementsByClassName('feed-tweet1').style.display='flex';
    
});

لماذا لا يكرر فقط عند النقر على الزر ؟

index.rar

لديك العديد من الأخطاء:

• btn.click لا تمرر إلى التابع addEventListener بل تعرف بمفردها كالتالي:

  btn.onclick = function createTweet(){
    ...
  }

   

• يوجد خطأ  في ذكر اسم المكون الجديد عند تحديد قيمة innerHTML له، يجب المحافظة على ذكر اسم المتغير كما هو في كل مكان:

  newtweet.innerHTML = inp.value;    
  ^^^^^^^^

   

• يجب إلغاء الحدث الأساسي وهو إرسال بيانات النموذج، يتم ذلك عبر التابع preventDefault كالتالي:

  btn.onclick = function createTweet(e){
    e.preventDefault();
    ...
  }

   

• يجب نقل خواص التنسيق إلى ملف CSS وليس معالجتها ضمن جافاسكربت، وذلك لتجنب الأخطاء:

  .feed-tweet1 {
    display: flex;
  }

   

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