What is the best way to have an input automatically update its value to match its ID?

Can someone assist me with creating a button to display answers to questions using input boxes? I have assigned the IDs of the input boxes as the answers themselves, but I am facing issues trying to change the text to match their respective IDs. The current JavaScript code doesn't seem to be working as expected. Any suggestions on how to fix this?

function updateAnswers(){

    var inputs = document.getElementsByTagName('input');
    
    for (var i=0; i<inputs.length; i++){

        document.getElementById(inputs[i].id).value = inputs[i].id;

    }

}

Answer №2

It is crucial to avoid duplicate IDs in your system, especially when multiple questions have the same answer.

To prevent this issue, consider utilizing a data attribute to store the answer:

<input type="text" data-answer="Twenty-seven" />

You can then update your JavaScript code like this:

for( j=0; j<y.length; j++) {
    y[j].value = y[j].getAttribute("data-answer");
}

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

Strategies for transferring all selected checkbox IDs to REST endpoint

I'm currently diving into web development and have set up a few checkboxes on my page. Right now, I have four checkboxes available. My goal is to send the IDs of the checkboxes that the user has checked to my "REST Service". Below is the code that I&a ...

What steps are needed to craft a customized greeting on discord using the latest nodejs update?

I am facing an issue where the following code is not sending anything: client.on("guildMemberAdd", (member) => { const welcomeMessage = "Please give a warm welcome to <@${member.id}> <a:pepesimp:881812231208181790> as th ...

Transmit JSON information from one webpage and dynamically retrieve it from another page via AJAX while both pages are active

I am attempting to transfer JSON data from page1 when the submit button is clicked and then retrieve this data dynamically from page2 using AJAX in order to display it in the console. I am unsure of the correct syntax to accomplish this task. There was a s ...

Receiving updates on the status of a spawned child process in Node.js

Currently, I'm running the npm install -g create-react-app command from a JavaScript script and I am looking to extract the real-time progress information during the package installation process. Here is an example of what I aim to capture: https://i ...

Function exported as default in Typescript

My current version of TypeScript is 1.6.2 and we compile it to ECMA 5. I am a beginner in TypeScript, so please bear with me. These are the imported library typings. The contents of redux-thunk.d.ts: declare module "redux-thunk" { import { Middle ...

Tips for repairing buttons in the CSS container

The buttons in the CSS search-box are not staying fixed as intended. They should be within the search box, but instead, they are protruding out of the panel. I attempted to utilize z-index, but it did not produce the desired outcome. https://i.sstatic.n ...

Reassigning Click Functionality in AJAX After Initial Use

Encountering an issue with a click event on an AJAX call. The AJAX calls are nested due to the click event occurring on a div that is not present until the first AJAX call is made. Essentially, I am fetching user comments from a database, and then there ar ...

Invoking a PHP function file through Ajax

Currently, I am utilizing Ajax with Bootstrap Modal to retrieve content from a Database. One of the functions in my functions file is responsible for verifying the existence of a remote file: function checkRemoteFile($url) { $ch = curl_init(); cur ...

Showing RSS feed on Vue.js interface

I am trying to integrate a Google Alert feed into my Vue.js application, specifically on the "Dashboard.vue" component using "Feed.vue". I have successfully implemented this feature in JavaScript, but I am facing difficulties converting it to Vue.js. Curr ...

Unable to assign image src to a dynamically generated div

My current task involves setting the background URL of a dynamically created div in JavaScript, intended for use with the jQuery Orbit slider. Below is my approach: var content1 = null; $("#featured").html("<div id='content' style='&apos ...

Search for specific parameters in an array and retrieve them

I have been attempting to sift through an array of data retrieved from my API, but unfortunately, the data remains unfiltered. I suspect that it might be due to the way I implemented my method or perhaps my params are not being returned correctly. Below ar ...

Using headers in the fetch api results in a 405 Method Not Allowed error

I am facing an issue while attempting to make an ajax request using fetch. The response I receive is a 405 (Method Not Allowed) error. Here is how I am trying to execute it: fetch(url, { method: 'get', headers: { 'Game-Toke ...

The 'in' operator cannot be used to look for 'size' within

I came across an informative answer Following the advice in the answer, I implemented the following code: function fetchCountryInfo() { $.ajax({ url: "https://en.wikipedia.org/w/api.php?action=parse&disablelimitreport=true&format=json&p ...

Issues with returning a response in AWS Lambda using NodeJs

I have been experimenting with a basic Node Js example on AWS Lambda that includes the Async library. The code seems to be functioning correctly, however, for some reason, the Lambda Function is returning a null response. As a newcomer to Node, I could use ...

What is the best way to switch image position using javascript?

I'm experimenting with creating a function that toggles the image source when clicked - changing it back and forth. <img src="http://images.clipartpanda.com/laughing-smiley-face-clip-art-smiley-face-clip-art10.jpeg" longdesc="http://sm ...

Express sending files and redirecting URLs

I have multiple middleware functions in my application. The first app.use checks if the system is under pressure and if it is, I want to serve the static file /index.html and redirect the user's browser to "/#" + req.url. For instance: app.set("port ...

Update the image and heading simultaneously when hovering over the parent div

I am looking to enhance the user experience on my website by changing the color of headings and images when a user hovers over a specific section. Currently, I have been able to achieve this effect individually for each element but not simultaneously. Any ...

Fetching specific information from MySQL using EJS

Check out the Github project here Currently, I am in the process of developing a Quiz creation application using EJS as the templating engine along with jQuery, Bootstrap, and MySql. I have encountered a challenge where I am trying to display the corresp ...

Shading THREE.js Color with Textures

I have added a simple box to my scene, and I am looking to create a shader that will apply a texture to it and add color to this texture. Here is my vertex shader (nothing special about it): <script id="vertexShader" type="x-shader/x-vertex"> ...

When the div is refreshed, the input box should retain the text instead of clearing it

I am facing an issue with a div that refreshes every 3 seconds. There is an input box inside the div, but whatever I type gets cleared out in 3 seconds. Is there a way to prevent the text from being cleared out and keep it inside the input box? index.js ...