What could be the reason for the absence of this Javascript function in my attribute?

I have been working on an app using electron, and I have a function that successfully adds tabs to the app. The issue arises when I try to add tabs via JavaScript with the onclick attribute - they show up as expected but do not execute the code to hide and show tab content like the manually added ones.

I believe that my function is adding everything necessary for proper execution, but I'm open to being proven wrong. Here's the function responsible for adding tabs and calling openTab() onclick, which works when done manually:

function addTab() {
  const button = document.createElement("button");

  button.className = "tab-link";
  button.innerHTML = "New Tab";
  button.onclick = "openTab(event,'test')";

  document.getElementsByClassName("tab")[0].appendChild(button);

}

If it's helpful, here's the function used to hide and show tab content:

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tab-content");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tab-link");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

Answer №1

In order to properly set the value for the onclick method, make sure it is a function and not a string. Remember to also call the openTab function with the event and 'test' as parameters when the click listener is triggered instead of invoking the listener immediately. Here's an example:

button.onclick = e => openTab(e, 'test');

Furthermore, it is recommended to use classList instead of manipulating the className property directly:

const active = document.querySelector('.tab-link.active');
if (active) {
  active.classList.remove('active');
}
evt.currentTarget.classList.add('active');

Instead of iterating through each tabcontent element, consider adding a class with a CSS rule like display: block. This way, you can easily select the currently open tab using querySelector, remove the class, similar to the example above.

Since you are using Electron, feel free to leverage ES6+ syntax throughout your codebase - there's no need to rely on var anymore.

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

If the variable is not defined, then utilize a different one

There are two scopes: $scope.job and $scope.jobs. I also have a variable called job; If $scope.job is undefined, I want $scope.jobs to be assigned to the job variable using the following code: var job = $scope.jobs. However, if $scope.job is defined, the ...

Validate if a string in JQuery contains a specific substring

How can I determine if one string contains another string? var str1 = "ABCDEFGHIJKLMNOP"; var str2 = "DEFG"; What function should I utilize to check if the string str1 includes the string str2? ...

Guide to creating a rising or waving effect for text using CSS or JavaScript without the need for animation

Is there a way to style dynamic text like this using HTML? I'm open to using CSS or Javascript, as long as it does not involve animation. ...

Utilize React to generate HTML content and send it as the email body through Node.js

I am currently working on a react application that consists of two main pages - AddStatus and ViewStatus. Both of these are implemented as react components. My current task involves sending out an email daily at a specific time, containing the details dis ...

Utilizing two DTOs for a single controller in NestJS

I'm having trouble retrieving and transforming different types of dtos from the body. My goal is to extract and transform firstDto if it's incoming, or convert secondDto if that's what's being received. However, my current code isn&apos ...

Implementing real-time time updates using php ajax technology

It's fascinating how websites can update the time dynamically without using ajax requests. I currently have a comment system in place. $('#comment').click(function(){ $.post(url,{ comment : $(this).siblings('textarea.#commen ...

"Every time ajax is called, it will always generate

function lks() { var groupname = document.getElementById('groupname').value; $.ajax ({ url: 'verifyGroup.php?groupname='+groupname, type: 'get', ...

Using Fetch API in NextJS requires pressing the Enter key twice for it to work properly

The functionality of this component should display JSON data in the console log after entering input into the search bar and hitting the enter key. However, there is a lag where the data doesn't show until the enter key is pressed a second time. Addit ...

Update the parameter value in a URL using JavaScript

I have a URL similar to this one here. something.com/TaskHandler/search.do?action=search&category=basic&page=1&sortBy=NAME&Ascending=true&showHiddenElements=false The parameter I'm interested in is showHiddenElements, and I would ...

differences in rendering of flexbox align-items: center between Chrome and Firefox

As I was attempting to center a div inside another div using flexbox, an inconsistency in rendering between Firefox and Chrome caught my attention. In the scenario, there are 3 divs, each with properties display:flex, justify-content:center, and align-ite ...

Switch Tabs with Dropdown Selection

I came across a website with a similar feature, but I am interested in using a dropdown menu instead of a button or link. Check out this webpage for reference The problem seems to be related to this line of code: onchange="$('#'+$this).tri ...

Tips for creating a script to calculate the population count of a 16-bit integer with either php or javascript

Looking to write a function that calculates the population count of a 16-bit integer in either php or javascript? Population count refers to the number of "turned on" bits, essentially counting the number of ones in the binary representation. For example, ...

How to retrieve a string value from an object in Express.Js by using the key value pair

I'm wondering about the proper way to retrieve a value from an object where the key value is a string. This involves sending data from the client side and receiving it on the backend using express.js. Example of data sent from the client side: var ...

I encountered an issue where my style.css file was not properly linking to my HTML code. Whenever I saved the file, it would open

I'm a beginner in the world of HTML/CSS. When I save my style.css file, it shows up as a Notepad+ settings file and doesn't seem to work with my HTML. Can anyone advise me on what steps I should take? ...

Incorporating styling preferences within a directive's template

One of the directives I am currently working on looks like this: app.directive('MessageChild', function($timeout) { return { restrict: 'E', scope: { pos: '=?', msg: '=' ...

Fill the table with information from a JSON file by selecting options from drop-down menus

I am currently working on a web application project that involves bus timetables. My goal is to display the timetable data in a table using dropdown menus populated with JSON information. While I believe I have tackled the JSON aspect correctly, I am facin ...

Incorporating useState into React Native navigation screens to dynamically update FlatList items

I'm working on implementing react-navigation to pass and update useState between screens in order to render a flatlist. The issue I am facing is that the flatlist updates correctly when I navigate back to the previous screen and then return to the com ...

Tips for aligning a custom icon to the left in a Jquery mobile header

I have successfully implemented a custom icon in the header, but it is currently displaying in the center. How can I adjust it to be positioned on the left side instead? <div data-role="header" data-theme="a"> <h3> ...

Automatically bypassing git conflicts in package.json: A step-by-step guide

We encounter frequent updates to shared npm packages in our app, resulting in multiple pull requests updating the same package version. Consequently, conflicts arise on GitHub when these pulls are merged into the master branch. Is there a way to automati ...

Exploring the Depths of Google Chrome: Unleashing the Power of

While a similar question has been posed previously, I am encountering difficulties debugging Javascript in Google Chrome. When I navigate to Page > Developer, the "Debug Javascript" function (Ctrl+Shift+L) is not active. Even trying Alt + ` does not se ...