Accessing the text content of the clicked element using vanilla JavaScript

Retrieve an item from the dropdown list and insert it into a button's value.

function updateButton() {
  document.getElementById("ul").classList.toggle("show");
}
var dropdown = document.getElementById('ul');
var items = ["HTML", "CSS", "JavaScript", "jQuery", "AngularJS"];
for (var i = 0; i < items.length; i++) {
  var listItem = document.createElement("li");
  var link = document.createElement("a");
  link.setAttribute('href', '#');
  listItem.appendChild(link);
  var textNode = document.createTextNode(items[i]);
  link.appendChild(textNode);
  dropdown.insertBefore(listItem, dropdown.childNodes[i]);
}

Answer №1

Consider using different ID names

Using 'ul' as an ID for an element might not be the best choice, it's recommended to use more specific and semantic IDs.

Use JavaScript query for relevant DOM content

In your comment, you mentioned that your HTML ul tag has a 'class', not an 'id'. However, in your question, you are querying the DOM by id. You will need to either update your HTML to give the ul tag an id or modify your function to target elements by class using

documentGetElementByClass('some_class')
-> note that this returns an array, so you would access the element by index (e.g.
documentGetElementByClass('some_class')[0]
). If your HTML is just a single line like <ul></ul>, then you should query the DOM by tag name like this:
documentGetElementByTagname('ul')[0]
.

Ensure your terminology is correct

You inquire about replacing a drop-down menu with a button value, but your code shows that you are working with links in the form of 'a' tags and modifying their href attributes - which is unrelated to buttons. Buttons are either paired tags like <button></button> or self-closing tags like <button />.

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

AngularJS - Optimizing Video Loading Time

My template is set up to load details via a JSON file, including a video embed. While everything from the JSON files is working perfectly, I'm encountering an issue where the same video appears on every item. Is there a way to assign individual videos ...

Redirecting to a different page using setTimeout in Internet Explorer 8

My goal is to use JavaScript to redirect the user to a different page after a delay of 1 second: setTimeout("document.location.href='new_page.html'", 1000); But in Internet Explorer, this redirection occurs immediately instead of after 1 second ...

Issues with receiving data on $.ajax POST request

If you'd like to check out my website Please use the following login details (case sensitive): Username: stack Password: stack Click on the tab labeled "yourhours." The main goal is to send all input box data to a database. At the moment, I am fo ...

The process of embedding one script into another script is underway

I've been struggling to optimize the loading of a responsive/mobile page, but then I came across a jQuery plugin that dynamically toggles elements based on screen width. This seemed like the perfect solution as it eliminates the need for extra HTTP re ...

Discover the nodes with the highest connections in a D3 Force Graph

As I explore the functionalities of a D3 Force Directed Graph with zoom and pan features, I encounter an issue due to my limited knowledge of d3.js. Is there a way to estimate the number of links for each node in this scenario? I am currently at a loss on ...

An unexpected error occurred while attempting to establish a connection to a MySQL server using Sequelize: 'LRU is not a constructor'

I have been working on a web application that utilizes boardgame.io's Tic-Tac-Toe tutorial game, with a twist - the results of each match are saved to a MySQL database. The current state of my code involves trying to establish a connection to the data ...

Using Jquery to attach an event to a particular div which is part of a group of divs sharing

I am trying to implement a mouseup event on a series of divs that, when clicked, will reveal a child div ('menu'). All the parent divs have the same class. Here is an example: <div class="container"> <div class="menu"><p>Text ...

The execution time for React is much longer than anticipated

I have tried to integrate the drench game into my project. Below is the code snippet I have used. The logic seems correct and given that it's a 14x14 board, the execution time shouldn't be too long. However, after a few clicks when the state.cove ...

Mastering jQuery UI: A beginner's guide to utilizing the date picker widget

This is my first venture into the world of HTML and JavaScript, so I am asking for your patience. I am trying to incorporate the Datepicker widget from jQuery UI, following the instructions on the Getting Started page. There seems to be an issue with lin ...

What is the best method for positioning two forms in a vertical arrangement?

I'm looking to integrate a Login form in HTML within my C# project. Here's what I have so far: However, as you can see, the layout is not very aesthetically pleasing. I'm struggling to align the elements in a more visually appealing way. My ...

A guide to activating tag selection within the DevExtreme tag box

I'm currently utilizing devExtereme within my Angular project. My goal is to enable the selection of text within tags in my tagbox component. Here's what I have implemented: <dx-tag-box [dataSource]="sourves" [value]="value&quo ...

The header row in HTML tables sometimes vanishes unexpectedly after sorting the table

Upon filtering the table, I noticed that the header disappears sporadically. The issue is that the table header row should remain in place regardless of whether or not the characters used for filtering are present in the table rows. In Example 1: When fil ...

Arranging Radio Buttons with Bootstrap Styling

Check out this screenshot I am currently utilizing bootstrap to design an image radio button, and my goal is to position the radio button on the top right corner of the image. I've attempted absolute positioning without success, so it's likely t ...

Managing business logic in an observable callback in Angular with TypeScript - what's the best approach?

Attempting to fetch data and perform a task upon success using an Angular HttpClient call has led me to the following scenario: return this.http.post('api/my-route', model).subscribe( data => ( this.data = data; ...

Update text based on the status of a boolean variable in AngularJS

I am creating a container using ng-repeat, and here is the corresponding HTML code: <div class="mission_box clearfix" ng-repeat="mission in missions"> <img src="images/tick_patch.png" class="expired_img"> <h2>{{mission.name}}< ...

Ways to extract particular items from a JSON array and store them in a JavaScript array

I am dealing with an external JSON-file structured as follows: { "type":"FeatureCollection", "totalFeatures":1, "features": [{ "type":"Feature", "id":"asdf", "geometry":null, "properties": { "PARAM1":"19 16 11", ...

Error encountered in Vue: Unexpected token (x:y) when utilizing webpack-dev-server with a process.env variable

While constructing a Vue (2.7.14) component with webpack-dev-server, I encountered a need to make a URL dynamic in my Vue CLI 2 code using a process.env variable. In order to achieve this, I made a modification to the line of code in MyComponent.vue: ...

Is it necessary to incorporate a Controller along with PostgreSql?

Currently, I'm in the process of working on a project and aiming for well-organized coding practices. However, I find myself puzzled by the concept of controllers. According to my research, it appears that controllers are primarily used when dealing w ...

The br tag in HTML cannot be utilized in conjunction with JavaScript

I am currently working on a project involving HTML and JavaScript. I have a "textarea" where data is inserted into the database upon pressing the "Enter key." However, I am encountering two issues: Currently unable to save data like "Lorem Ipsum" (the ...

Creating a Vue component that leverages the computed property from a mixin

My situation involves a straightforward component that utilizes a mixin shared across various components that have similar functionalities. However, upon running it, an issue arises: The error message "Property or method 'activeClass' is not ...