Issue with element.onchange not functioning properly with a group of elements

Question

Issue with element.onchange not functioning properly with a group of elements

Exploring my Form and Question classes has been an interesting journey. In my "Form" class, I store an array of questions and utilize a method called render() to display each one.

    render() {
        let htmlElement = document.getElementById("formBody");

        let id = Question.GenerateID();
        htmlElement.innerHTML += `
                <div class="p-2">
                    <input type="text" class="input-transparent w-100" id="${id}.t" value="${this.Title}" placeholder="Unnamed question">
                </div>`;

        /**
         * @param {int} id
         */
        let questionNameChange = function(id) {
            this.Title = document.getElementById(id + ".t").value;
        };

        document.getElementById(id + ".t").onchange = questionNameChange.bind(this, id);
     }

Pictured below is the form that showcases these elements.

In troubleshooting, I've encountered an issue related to the element.onchange event which helps me modify question titles.

Despite adjusting input text fields for various questions, the title only updates on the last rendered question.

Could there be an error in my approach?

javascript events

Answer 1

Answer №1

If you find that the onchange event is not binding properly, consider delaying it until the element has been fully inserted into the DOM. One way to do this is by wrapping the onchange function assignment in a setTimeout:

  setTimeout(function() {
        document.getElementById(id + ".t").onchange = questionNameChange.bind(this, id);
  })

Take a look at this functional example:

let Question = {GenerateID: () => Math.floor(Math.random() * 100)}
class MyClass {
  constructor(){
    this.Title = 'my title'
  }
  
  questionNameChange(id) {
    this.Title = document.getElementById(id + ".t").value;
    document.getElementById(`${id}-label`).innerHTML = this.Title
  }

  render() {
        let htmlElement = document.getElementById("formBody");

        let id = Question.GenerateID();
        htmlElement.innerHTML += `
                <div class="p-2">
                    <input type="text" class="input-transparent w-100" id="${id}.t" value="${this.Title}" placeholder="Unnamed question">
                    <label id="${id}-label"></label>
                </div>`;

        setTimeout(() => {
          document.getElementById(id + ".t").onchange = () => {
            this.questionNameChange(id)
          }
        })
        
  }   
}

$(() => {     
  let myClass = new MyClass()
     myClass.render()
     myClass.render()
     myClass.render()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="formBody">

</form>

Answer 2

If you find that the onchange event is not binding properly, consider delaying it until the element has been fully inserted into the DOM. One way to do this is by wrapping the onchange function assignment in a setTimeout:

  setTimeout(function() {
        document.getElementById(id + ".t").onchange = questionNameChange.bind(this, id);
  })

Take a look at this functional example:

let Question = {GenerateID: () => Math.floor(Math.random() * 100)}
class MyClass {
  constructor(){
    this.Title = 'my title'
  }
  
  questionNameChange(id) {
    this.Title = document.getElementById(id + ".t").value;
    document.getElementById(`${id}-label`).innerHTML = this.Title
  }

  render() {
        let htmlElement = document.getElementById("formBody");

        let id = Question.GenerateID();
        htmlElement.innerHTML += `
                <div class="p-2">
                    <input type="text" class="input-transparent w-100" id="${id}.t" value="${this.Title}" placeholder="Unnamed question">
                    <label id="${id}-label"></label>
                </div>`;

        setTimeout(() => {
          document.getElementById(id + ".t").onchange = () => {
            this.questionNameChange(id)
          }
        })
        
  }   
}

$(() => {     
  let myClass = new MyClass()
     myClass.render()
     myClass.render()
     myClass.render()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="formBody">

</form>

Issue with element.onchange not functioning properly with a group of elements

Answer №1

Similar questions

Creating a 24-hour bar chart using Flot Javascript, showcasing data points at each hour mark

Tips for setting a threshold in a highcharts ng chart

What could be causing my React Router component to display incorrect styling?

Issue with updating data variable from watcher on computed property in Vue.js with Vuex

Having trouble installing $ npm i mini-css-extract-plugin. Any ideas on what might be causing the issue?

Using NodeJS and Express: redirection fails to load the specified endpoint

Create JavaScript code with PHP

What is the default behavior for an invalid select option in Angular 2 model-driven forms?

Is there a way to identify when a fresh google instant page appears?

Discovering the world of Promises in TypeScript and understanding how to return specific types

Having trouble with the "initSdk" property being undefined in your React Native Appsflyer integration?

Can multiple `npm install` commands run at the same time?

Utilizing a URL to dynamically update the content within an I-Frame

Creating an HTML element that can zoom, using dimensions specified in percentages but appearing as if they were specified in pixels

JavaScript xPath is ineffective at providing a return value

Looking to modify the contents of a shopping cart by utilizing javascript/jQuery to add or remove items?

Challenges Encountered with Array.every

Exploring the combination of Babel and Next.js: Integrating custom scripts into a project

Sending a Javascript string to PHP

Performing an AJAX call in Rails 4 to update a particular value