Error updating component (DirectAnswer) Caused By: Cannot read properties of null (reading 'addEventListener') (unknown)

Search
1

Hi

I run in an Error wenn i run a search with a Direct Answer. I use the Search Libary and in there i use the custom renderer (plain javascript). Why did I get this Error?

answers.min.js? [sm]:16748 The following problem was encountered during universal search: Error updating component (DirectAnswer) Caused By: Cannot read properties of null (reading ‘addEventListener’) (unknown)

My Code:

this.addComponent("DirectAnswer", {
    container: ".direct-answer",
    render: function (data) {

        html = '<div class="row"><h2 class="mt-4 heading">Schnellantwort</h2><div class="col-lg-12 floating_card content">';
        if (data.answer.fieldApiName == "address") {
            html += '<div class="col-lg-12 floating_card content mt-4"><div class="card"><div class="p-md-5"><h2 class="">' +
                data.answer.entityName +
                ' Adresse</h2><p>' +
                data.answer.value.line1 +
                "<br>" +
                data.answer.value.postalCode +
                " " +
                data.answer.value.city +
                '</p></div></div></div>';
        }

        if (data.answer.fieldApiName == "mainPhone") {
            html += '<div class="col-lg-12 floating_card content mt-4"><div class="card"><div class="p-md-5"><h2 class="">' +
                data.answer.entityName +
                ' Telefon</h2><p>' +
                data.answer.value.replace(/^(\+41)([0-9]{2})([0-9]{3})([0-9]{2})([0-9]{2})/g, '0$2 $3 $4 $5') +
                '</p></div>' +
                '</div><div class="highlight-button"><a href="tel:' +
                data.answer.value +
                '" class="btn btn-success btn-rounded">Anrufen</a></div>';
        }

        if (data.answer.fieldApiName == "c_preisAb") {
            html += '<div class="col-lg-12 floating_card content mt-4"><div class="card"><div class="p-md-5"><h2 class="">' +
                data.answer.entityName +
                ' Preis</h2><div class="p-d-5"><p>ab ' +
                parseFloat(data.answer.value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/[0]{2}/g, '-') +
                ' Fr.</p></div></div></div><div class="highlight-button"><a href="' +
                data.relatedItem.data.fieldValues.landingPageUrl +
                '" class="btn btn-success btn-rounded">Mehr Informationen</a></div>';
        }

        if (data.answer.fieldApiName == "emails") {
            html += '<div class="col-lg-12 floating_card content mt-4"><div class="card"><div class="p-md-5"><h2 class="">' +
                data.answer.entityName +
                ' E-Mail</h2><div class="p-d-5"><p>' +
                data.answer.value[0] +
                '</p></div></div></div><div class="highlight-button"><a href="mailto:' +
                data.answer.value[0] +
                '" class="btn btn-success btn-rounded">E-Mail senden</a></div>';
        }

        if (data.answer.fieldApiName == "emails") {
            html += '<div class="col-lg-12 floating_card content mt-4"><div class="card"><div class="p-md-5"><h2 class="">' +
                data.answer.entityName +
                ' E-Mail</h2><div class="p-d-5"><p>' +
                data.answer.value[0] +
                '</p></div></div></div><div class="highlight-button"><a href="mailto:' +
                data.answer.value[0] +
                '" class="btn btn-success btn-rounded">E-Mail senden</a></div>';
        }

        if (data.answer.fieldApiName == "c_beschreibung_Rich") {
            html += '<div class="col-lg-12 floating_card content mt-4"><div class="card"><div class="p-md-5"><h2 class="">' +
                data.answer.entityName +
                ' Beschreibung</h2><div class="p-d-5"><p>' +
                mdconverter.makeHtml(data.answer.value) +
                '</p></div></div></div><div class="highlight-button"><a href="' +
                data.relatedItem.data.fieldValues.landingPageUrl +
                '" class="btn btn-success btn-rounded">Mehr Informationen</a></div>';
        }

        if (data.directAnswer.searchState == "search-complete") {
            html += '<div class="col-lg-12 floating_card content mt-4"><div class="card"><div class="p-md-5"><h2 class="">' +
                data.relatedItem.data.fieldValues.question +
                '</h2><div class="p-d-5"><p>';
            htmlfaq = mdconverter.makeHtml(data.relatedItem.data.fieldValues.answer);

            htmlfaq = htmlfaq.replace("{!WEBCAM_1!}", '<img src="https://engstligenalp.ch/webcam/livecam.jpg" width="100%"><br><br>');


            if (htmlfaq.indexOf("{!WETTER!}") >= 0) {
                htmlfaq = '<div class="blockMeteo"></div>';
            }

            html += htmlfaq;
            html += '</p></div></div></div><br>';
            runwetter();


        }

        return html;
    }
});