Using various functions for event listeners

Avoiding jQuery

Hello there! I'm currently working on implementing multiple Event Listeners for a button.

 function logoContame(){
        var logo = document.getElementById("logoheader");
        logo.addEventListener("click", hideDivHistorias);
        logo.addEventListener("click", showDivPagina2);
    }

    function showPagina2(){

        var historias = document.getElementById("historias");

        var hist1 = document.getElementById("hist1");
        hist1.id="hist1";
        hist1.style.opacity = "0.0";
        historias.appendChild(hist1);

        var hist2 = document.getElementById("hist2");
        hist2.id="hist2";
        hist2.style.opacity = "0.0";
        historias.appendChild(hist2);

        var hist3 = document.getElementById("hist3");
        hist3.id="hist3";
        hist3.style.opacity = "0.0";
        historias.appendChild(hist3);

        var textoabrigo= document.getElementById("textoabrigo");
        textoabrigo.id="textoabrigo";
        textoabrigo.style.opacity = "0.0";
        historias.appendChild(textoabrigo);

        showHeader();
        startFadeInPagina2();
        showDivPagina2();
        menuPag1();
        logoInicial();

    }

    //Creating Initial Page 

    function showDivPagina2(){

        var div2 = document.getElementById('historias').style.visibility = 
        "visible";
    }

The first event listener is functional, however, the second one seems to be problematic. Is there a solution to this issue? An error message that's continuously appearing is:

Uncaught TypeError: Cannot set property 'id' of null
    at showPagina2 (code.js:290)
    at HTMLButtonElement.logo1 (code.js:30)

This error seems to be linked to the "hist1" element.

Thank you for your assistance!

javascriptaddeventlistener

Answer №1

Based on the information provided in this response:

var logo = document.getElementById("logoheader");

logo.addEventListener('click',() => {    
    hideDivHistorias();
    showDivPagina2();    
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Verify if a checkbox is selected upon loading the page

Hey there, I have a jQuery change function set up to turn an input text box grey and read-only when a user selects a checkbox. However, I'm interested in adding a check on page load to see if the checkbox is already selected. Any suggestions for enhan ...

javascriptjqueryhtml

JavaScript is always overlooked and goes unused

Can you figure out why the Javascript code isn't working? <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <script type="text/javascript"> function ChangeDisplay() { alert("Changing"); document ...

javascriptasp.net

Invoking a Node.js function using a URL reference

Is there a way to call a function located in a remote URL? I have the page URL and the function name. The server-side application is running on NodeJs Express, and the function structure is as follows: function executer(param1, param2){ //logic re ...

javascriptnode.jshttpexpress

What steps can be taken to add a radio button group to a form in order to choose between the smoking and non-smoking sections of a restaurant?

I'm trying to replicate the functionality of radio buttons within a bootstrap form-group, where a line in a form contains multiple buttons ("btn btn-success" for example) that can be selected, but only one at a time. I am aiming for an output like thi ...

javascripthtmlcssbootstrap-4bootstrap-modal

Looking for advice on using the ternary operator in your code? Let us

In my JS file, the code $scope.button = id ? "Edit" : "Add"; is functioning correctly. I am trying to implement it in the View like this: <button name="saveBtn" class="btn btn-primary" tabindex="10">{{person.id ? 'Edit' : 'Add&ap ...

javascriptangularjs

I've noticed that the NextJs router appears to be significantly slower in comparison to React

I currently have a website that is built in both React Js and Next Js. The issue I am currently encountering is that the router in NextJs is noticeably slower compared to react-router-dom. It takes almost 2-3 seconds to change the route. To experience th ...

javascriptreactjsnext.jsnext-router

How can you use DOM manipulation to extract input data from an <input type="file"> element?

Is there a way to retrieve the data from an <input type="file"> element, specifically if it contains an image, without utilizing an html form? Here is the HTML code: <body> <input type= "file"> </body> ...

javascript

What could be causing the jQuery change function to stop working after loading HTML with AJAX?

When loading a form, I use AJAX to dynamically populate a select element from a PHP file. Previously, my change function was working fine (it displayed another input when 'other' was selected). However, after implementing the dynamic AJAX populat ...

javascriptjqueryajax

Choose the option from the jQuery dropdown list based on the displayed text instead of the value

In continuation of my previous question on jQuery getting values from multiple selects together, I am working with a select list like this: <select name="access" class="change" id="staff_off" runat="server"> <option value="8192">Off< ...

javascriptjqueryasp.net

Utilizing JavaScript to transition a grayscale thumbnail image to vibrant color

I am a beginner in the world of web development and I have no idea how to begin coding a JavaScript function that will smoothly transition a grayscale thumbnail image into a color thumbnail image when the user hovers their mouse over it, and then back to g ...

javascriptjquery

Retrieve Content from a Different Web Page Using Ajax

I recently received permission from another website to pull their RSS feeds, and now I'm trying to figure out what to write in TAG1 and TAG2. This is the specific issue I'm facing: Here is the HTML code (it's an ajaxed page) <!doctype ht ...

javascriptajax

Issue with VueJS where the datalist input does not reset the value

I am currently working on a Vue component that scans QR codes and adds information to a database upon successful scanning. The scanning process works perfectly fine. However, after successfully sending the data, I need to clear the input field in my datali ...

javascripthtmlvue.jsvue-componenthtml-datalist

The :contains method in jQuery functions smoothly in Firefox, Safari, and Chrome, but unfortunately does not work

My code on JSFiddle is having some compatibility issues with the jQuery :contains selector specifically in Internet Explorer versions 7, 8, and 9. The code works fine in Firefox, Safari, and Chrome. You can find the working code here. I tried making the ...

javascriptjqueryxmlinternet-explorerjsfiddle

There seems to be an issue with the visibility of the b-button within the b-table component in

I'm new to Vue Js and I'm having trouble with my b-button not displaying in my table. I can't figure out why. Below is my HTML code: <div id="listlocales"> <div class="overflow-auto"> ...

javascriptpythonhtmldjangovue.js

What is the best way to create a sliding animation on a div that makes it disappear?

While I may not be an expert in animations, I have a question about sliding up the "gl_banner" div after a short delay and having the content below it move back to its original position. What CSS properties should I use for this animation? Should I use css ...

javascripthtmlcsscss-transitionscss-animations

Adjusting canvas height in Storybook - Component does not fit properly due to low canvas height

I had a component that I needed to add to Storybook. It was working fine, but the styling was slightly off. I managed to resolve this by adding inline styling with position: absolute. Here is how it looks now: const Template: any = (args: any): any => ( ...

javascripttypescriptvue.jsstorybook

Are you facing issues with Handlebars parsing?

I am struggling to identify the issue in my HTML/JS code. Here is my HTML/JS: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="handlebars-v1.1.2.js"> ...

javascriptjqueryhtmlajaxhandlebars.js

What could be causing the error "Cannot read the state property of undefined in react-native?"

I really need some assistance. I am attempting to create a JSON object called users in my state properties to test the functionality of my authentication system. However, when I tried to access it, I encountered the error "Cannot read property 'state& ...

javascriptjsondictionaryreact-native

Tick the box to activate the ability to uncheck multiple boxes when there are already a certain number of boxes checked

I am currently developing a multiple-choice form in my MVC5 app and I am struggling to find a way to disable unchecked boxes once a specific number of boxes have been checked. For example, if 3 out of 5 boxes are checked, the remaining 2 should be disabled ...

javascriptjqueryhtmlasp.net-mvcrazor

Are there any instances where CSS is overlooking certain HTML elements?

In the following HTML code snippet, the presence of the element with class ChildBar is optional: <div class="Parent"> <div class="ChildFoo"></div> <div class="ChildBar"></div> <!-- May ...

javascripthtmlcss