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

Use Google Maps to plan your route and find out the distance in kilometers as well as the

Feeling a bit overwhelmed with the project I'm working on, but hoping for some guidance. We're aiming to create a form where users input a starting point and an ending point, similar to the examples on Google Maps (http://code.google.com/apis/ma ...

javascriptformsgoogle-mapsvariables

What is the best way to access and manipulate data stored in a Firestore map using React?

In my Firestore database, I have a field with map-like data: coordinates:{_01:"copper",_02:"gold",_03:"iron"} When viewing this database in the Firestore admin panel, it appears like this: pic However, when attempting to list items using the following c ...

javascriptreactjsgoogle-cloud-firestore

Is it possible to automate the process of constructing a dependency in the package.json file?

Currently, I am using firebaseui and require building it with French localization because the localized versions are not available on npm. In my current package.json file, the dependencies section looks like this: "dependencies": { "firebaseui": "^3.5 ...

javascriptnpmpackage.jsonfirebaseui

What discrepancies exist between running npm install on Windows versus Linux operating systems?

Just have a quick question to ask. I've been searching online with no luck. If I were to run npm install on a Windows machine to set up my dependencies, would it be viable to transfer the node_modules directory to a Linux machine and execute my nodej ...

javascriptnode.jsnpmnpm-install

What is the correct way to establish and terminate a MongoDB connection in a Node.js application?

Hey everyone, I have a piece of code at this link (https://github.com/MrRav3n/Angular-Marketplace/blob/master/server.js) and I'm curious if I am properly starting and ending my database connection. Should I connect and end the db connection in every a ...

javascriptnode.jsdatabasemongodbexpress

Best practice for detecting external modifications to an ngModel within a directive

I've been working on creating a directive that can take input from two sources and merge them into one. To achieve this, I'm monitoring changes in both inputs and updating the combined value in the ngModel of my directive. However, there's ...

javascriptangularjsangularjs-directiveangularjs-scopeisolate-scope

Utilize the function with another function (difficult to articulate)

Apologies in advance for my beginner question. Review the code snippet below: var dt = new Date(t*1000); var m = "0" + dt.getMinutes(); Depending on the t variable (unix time), the output can be one of the following: m = 054 // 54 minutes m = 03 // 3 min ...

javascript

employing strings in passing functions as arguments

The script below, taken from a tutorial by Adam Khoury, is designed to create a timer that displays a message once it reaches completion. While I grasp the overall functionality of the code, I'm puzzled by the use of strings in certain parts: 1) Why ...

javascriptstringfunctionarguments

What are the steps to create a dynamic navigation bar in React without encountering hydration issues?

My goal is to dynamically show or hide links based on user authorization. Here's my initial approach: const Navbar = () => { const { canDo, ...} = useUser(); //A Zustand store return ( <> <div> <ul> ...

javascripthtmlcssreactjs

Error encountered in React and Redux: Unable to read properties of undefined (specifically 'region')

Whenever a user clicks on edit, I am fetching data (an object) into a redux state and displaying it in a textarea. Here is the code snippet: const regionData = useSelector((state) => state.myReducer.userDetailList.region); The problem arises when this ...

javascriptreactjsredux

Display time series data from PHP by utilizing Flot Charts in jQuery

After receiving data from a database, which is formatted using PHP and returned as a JSON response for an Ajax call, I encountered an issue. Everything works fine and the data is plotted except when the X-Axis contains dates, in which case nothing gets plo ...

javascriptphpjqueryajaxflot

Add a third-party library file to Visual Studio

I'm currently working in Visual Studios and attempting to utilize the library provided at . However, I am encountering difficulties when trying to import the library. I have added the file to the project and attempted to use it within the Book.js (Vi ...

javascriptvisual-studio-2012

The jQuery click function triggers immediately upon the loading of the page

Despite my best efforts to resolve this issue independently and conduct extensive research on Google, I am still unable to identify the root of the problem. It seems that the click function continues to activate upon page load. Kindly elucidate the under ...

javascriptjqueryhtmlcss

Personalized dropdown appearance

During my work on a select box, I discovered that custom styling is not possible. I attempted to use some plugins but did not find one that met my needs. I am seeking a dropdown menu with options in both black and gray, similar to this template but using ...

javascriptjqueryhtmlcss

Modifying Element Values with JavaScript in Selenium using C#

As a newcomer to automation, I am facing a challenge with automating a web page that has a text field. I initially attempted using driver.FindElement(By.XPath("Xpath of elemnt").SendKeys("Value"); but unfortunately, this method did not work. I then resor ...

javascriptc#selenium

Visualizing Data with d3.js Force Chart: Integrating Images with Nodes for Dynamic Animation

After enhancing a force diagram to compare two profiles, I am faced with the challenge of getting the main node to display an image. View comparison here How can I centrally align and size the image correctly while making the thumbnail data from the JSO ...

javascriptd3.jschartsforce-layout

Creating key elements in JavaScript with the push() function

I'm working on a basic shopping cart system using JavaScript (Ionic 2 / Angular). In my PHP code, I have the following: <?php $cart = array( 48131 => array( 'size' => 'STANDARD', 'qty' => ...

javascriptjqueryangularionic-frameworkionic2

Node.js has no trouble loading HTML files, however, it seems to encounter issues when trying to

Having a bit of trouble with my JavaScript skills as I try to load my index.html file (seems like it should be the 5th easiest thing to do in JavaScript). Let me get straight to the point; when I manually open my index.html, it loads perfectly WITH the CS ...

javascripthtmlcssnode.js

React: Updating State with the Spread Operator and Array Method to Add Elements to an Array

Link to my jsfiddle code snippet: https://jsfiddle.net/ilikeflex/r2uws1ez/30/ I've been attempting to update the state in React by accessing the previous state. There are three different cases where I'm trying to achieve this, but I'm havin ...

javascriptreactjsreact-hooks

Ways to modify the color of a container's border by interacting with radio buttons through JavaScript

I'm currently facing a challenge with creating a settings dropdown menu that allows users to select different themes. Each theme is supposed to modify the background color and border color, but I have successfully implemented only the background color ...

javascripthtmlcss