خطأ h1 not defined في كود جافاسكريبت

يمكنك أن تقوم بهذا الأمر من خلا عمل متغير عام global باسم counter وتقوم بزيادة قيمته عند الضغط على الأيقونة، بالشكل التالي

let counter = 0;	// نعرف متغير عام هنا

function open1() {
    var opened = document.getElementById("open"),
        closed = document.getElementById("close");

  	// نزيد القيمة في العنوان
    counter += 1;
    document.getElementById("title").innerHTML = counter;

    opened.style.display = "block";
    closed.style.display = "none";
}

function close1() {
    var opened = document.getElementById("open"),
        closed = document.getElementById("close");

    // نزيد القيمة في العنوان
    counter += 1;
    document.getElementById("title").innerHTML = counter;

    opened.style.display = "none";
    closed.style.display = "block";
}

وإذا أردت أن تقوم بتغير لون العنصر h1 من خلال JavaScript عليك أن تستعمل الكود التالي:

var h1 = document.getElementById("title");	// تحديد العنصر
h1.style.color = "white";	// تغير لونه

سبب الخطأ الذي يظهر لديك هو أنك تقوم مباشرة بتنفيذ المتغير h1 دون تعريفه أولا:

h1.style.color = "white"; // +++++++

فجافاسكربت تفترض أن تقوم بتعريفه ثم سيمكنك الوصول اليه، 

أفهم من ذلك أنك تريد الوصول إلى الترويسة بالمعرف title، يمكنك القيام بذلك عن طريق:

var opened = document.getElementById("open"),
    closed = document.getElementById("close"),
    body = document.getElementById("body"),
    title = document.getElementById("title"), // ++++++++++++++++
    
    
    
    title.style.color = "white"; // ++++++++++++++

سيختفي بعد هذا نص الخطأ ولكن لن تعمل الفكرة بشكلها المتوقع. 

سنحتاج بعد هذا تغيير المحتوى النصي للعنوان عند كل ضغطة، أو بعبارة أخرى عند كل استدعاء للدالة open1. لفعل ذلك سنحتاج تزويد 1 للمحتوى العددي للعنوان. وبنفس المنطق:

title.innerHTML = clicks;

ستلاحظ بعض التحسن ولكن ستحتاج هاته الفكرة تعديلا أكثر يتلخص في:

function open1() {
    var opened = document.getElementById("open"), 
        closed = document.getElementById("close"),
        body = document.getElementById("body"), // لا حاجة لتعريف هذا المتغير فنحن لا نحتاجه أصلا في هاته الدالة 
        title = document.getElementById("title"),
        clicks = document.getElementById("title").innerHTML || 0, // نقوم باسناد قيمة صفرية كافتراض ان لم يحمل العنوان أي عدد 
        clicks = 0; // لا حاجة لإعادة ضبط عددد النقرات للصفر كوننا نريد تتبع عدد النقرات
    clicks = parseInt(clicks) + 1; // لتجنب اعتبار الاعداد كسلاسل نصية نقوم بجمع المكافئ للقيمة العددية التي يخزنها العنوان 
    opened.style.display = "block";
    closed.style.display = "none";
    title.style.color = "black"; // من الطبيعي أن لا يكون لون النص في حالته النشطة ابيضا

    title.innerHTML = clicks;
}

النتيجة:

function open1() {
    var opened = document.getElementById("open"),
        closed = document.getElementById("close"),
        title = document.getElementById("title"),
        clicks = document.getElementById("title").innerHTML || 0;

    clicks = parseInt(clicks) + 1;
    opened.style.display = "block";
    closed.style.display = "none";
    title.style.color = "black";

    title.innerHTML = clicks; 
}