What is the best way to retrieve ID tags and other element values for a string element stored in an array?

Is there a way to use document.querySelector("#") on an input element (and check if it is checked) that is saved in a string and then retrieved by innerHTML? I'm having trouble figuring out how to access it.

I am trying to loop through an array and log when a radio button is checked off. I have attempted using querySelectorAll("radio") with an array of querySelectors for the different ids of the radio buttons, but it doesn't seem to be working.

 <body>

<div class="stemmegiving"> </div>

<script>
var stemmegivingEl= document.querySelector(".stemmegiving")

    var alt=['<input type="radio" name="stem" class="kanpper" checked id=" Rødt" >',
    '<input type="radio" name="stem" value=""class="kanpper"id="SP"> ',
    '<input type="radio" name="stem" value=""class="kanpper"id="AP"> ']

for (var i = 0; i < alt.length; i++) {
  stemmegivingEl.innerHTML+= alt[i]
}

  var giStemmeEl = document.querySelector("#giStemme")
var alt2=[document.querySelector("#rødt"), document.querySelector("#SV"),document.querySelector("#AP")]

  for (var i = 0; i < alt.length; i++) {
    if (alt2[i].checked) {
      console.log(alt2[i] + " is true");
      console.log(typeof alt2[i]);
    }
    else {
       console.log(i + "not true");
   console.log(typeof alt2[i]);
 }
  }

  </script>
  </body>

I want to find a way to access it the same way as if you create an input element in the body and then querySelect it.

Answer №1

By utilizing jQuery, you have the ability to dynamically parse HTML and gain access to the query selector feature that you desire.

$(choice[i]).prop('selected');

https://example.com/jquery-parse-html/

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

Acquiring the Facebook profile_id and incorporating it into a URL using a Chrome Extension

Although I have limited knowledge of JavaScript, I believe I know enough to complete the task at hand; I just need some guidance. I am working on developing an extension that will extract the profile_id from the current Facebook page being viewed, and the ...

Passing a JavaScript variable to PHP resulted in the output being displayed as "Array"

After sending a JavaScript variable with the innerHTML "Basic" to PHP via Ajax and then sending an email with that variable, I received "Array" instead of "Basic". This situation has left me puzzled. HTML: <label class="plan-name">Plan name: <b ...

Organize an array of objects with underscore.js to arrange them in a

I have an array of objects that looks like this: profData=[{"Details":{"CODE":"PAT4PAS","DESCRIPTION":"PASTIE 4N20 12 X 175G","LOCATION":"FREEZER","UNITS":"BOX","WAREHOUSE":"00","AVAILABLE":"15.0000","ON_HAND":"15.0000","BRAND":"4N20","PRICE1":"18.80"," ...

Sorting an array of strings based on user input using Vue.js

I'm facing an issue where I have an array of various strings: [ "Aluminum", "Basic Materials", "Broad Credit", "Broad Market", "Cocoa", "Coffee", "Consumer Cyclicals", "Consumer Non-cyclicals", "Copper", "Corn", "Cotton", "Crude Oil", "Energy", "Exte ...

Expanding Perspective in React Native

Having trouble with implementing a camera feature that isn't scaling correctly. The issue seems to be related to the styling of the container View, as when the camera is rendered independently it works fine. The goal is for the camera to activate when ...

JavaScript code snippet for detecting key presses of 3 specific arrow keys on the document

For this specific action, I must press and hold the left arrow key first, followed by the right arrow key, and then the up arrow key. However, it seems that the up arrow key is not being triggered as expected. It appears that there may be some limitations ...

Cross-Origin Resource Sharing (CORS) issue: The Access-Control-Allow-Headers in preflight response does not allow the Authorization request header field

I am currently attempting to send a request from one localhost port to another. Specifically, I am utilizing angularjs on the frontend and node on the backend. Given that this is a CORS request, in my node.js code, I have implemented the following: res.h ...

Customize the Address Bar with Google Extension

I recently developed a unique Chrome extension that modifies the appearance of the new tab page by incorporating my site's index.html. However, I am facing an issue where the address bar displays https://example.com/index.html/. Is there a way to have ...

Tips for targeting the second field upon clicking the next button in React Native

I need help implementing a feature where, when a user clicks on the "Next" button, the focus shifts to the next field without using the ref method. Can someone assist me in achieving this goal without using ref? Thank you. ...

Develop an interactive React sidebar with changing elements

I'm in the process of developing a sidebar for a project, with the goal of making it similar to tools like Confluence. This means that we need the ability to rearrange documents and create subdirectory structures by simply moving the documents, with ...

Dealing with API Troubles: Resolving 'AxiosError: Request failed with status code 401' Issue in ReactJS

I encountered the following error: AxiosError: Request failed with status code 401 While attempting to log in to my react app, I researched similar solutions and discovered that some answers suggested the issue could be related to missing headers in Axi ...

Using a C++ reference to pass an array of a struct

I am currently navigating the world of structure programming and encountering some confusion when attempting to pass a structure of arrays in C++. My college project involves creating a Star Trek game, and here is a snippet of the code: void main_menu(cha ...

What is the best way to split a semicircular border radius in two equal parts?

Is there a way to halve the yellow line or remove it from above the red box, while keeping it below? Can this be achieved using just HTML and CSS, or is JavaScript necessary? * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 1 ...

Passing an array of objects as properties in React components

My functional component looks like this: function ItemList({ items }: ItemProps[]) { return <p>items[0].name</p> } Here is how I'm creating it: <ItemList items={items} /> The array items contains objects in the format [{name: &ap ...

Unable to invoke setState (or forceUpdate) on a component that has been unmounted

After updating the component, I encountered an issue with fetching data from the server. It seems that componentWillUnmount is not helpful in my case since I don't need to destroy the component. Does anyone have a solution for this? And when should I ...

Is it possible for jQuery to analyze HTML contained within a variable?

Currently, I am utilizing PHP along with an ajax command to retrieve the complete HTML content from an external webpage using the file_get_contents() function in PHP. After storing this HTML in a JavaScript variable, I am curious if it is possible to uti ...

Establish a connection that mirrors the previously clicked hyperlink

I am attempting to create a functionality where a link can return to a specific link that matches the one clicked on a main page. For example: <a href="link.html" onclick="store this link in memory" target=home></a> <a href="the stored lin ...

Encountering issues with link functionality on homepage due to React-Router v6 and Material-UI Tab integration

I'm currently working on a homepage that requires different page links. Below you can find the necessary code snippet for setting up the tabs and routes for each page: <li> The tabs are located here - <Link to="/demo">D ...

What is the best way to obtain the id of an HTML element that is generated within jQuery code?

Typically, data is retrieved in HTML by storing the html in the html file. In my case, however, I create the html element inside jQuery. So, how do I call out the div id? How can I replace document.getElementByID ("edit").innerHTML=.... when the element i ...

Encountering the "ENOTFOUND error" when trying to install ReactJs via Npm

Struggling to install ReactJs? If you've already installed Nodejs and attempted to create a ReactJs project folder using npx create-react-app my-app, but encountered the following error: npm ERR! code ENOTFOUND npm ERR! syscall getaddrinfo npm ERR! er ...