Javascript custom element's oninput function issue

Question

Say, I need to call a function in a custom element, such that when a slider moves in that element the text gets updated(only for that element). The main.js file,

class OninputClassDemo extends HTMLElement {
    constructor(){
        super();

        const shadow = this.attachShadow({mode:'open'});

        this.parent = document.createElement('div');

        this.slider = document.createElement('input');
        this.slider.setAttribute('type','range');
        this.slider.setAttribute('min','0');
        this.slider.setAttribute('max','99');
        this.slider.setAttribute('value','0')

        this.text = document.createElement('input');
        this.text.setAttribute('type','text');
        this.text.setAttribute('value','');

        this.parent.appendChild(this.slider);
        this.parent.appendChild(this.text);
        shadow.appendChild(this.parent);        

        this.slider.setAttribute('oninput','OninputClassDemo.changeValue()');

    }

    changeValue = function(){
        this.text.setAttribute('value',this.slider.getAttribute('value'));
    }
}

window.customElements.define('demo-element',OninputClassDemo);

On the template side,

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="main.js"></script>
</head>
<body>
    <demo-element></demo-element>
</body>
</html>

The error I am getting is,

OninputClassDemo.changeValue is not a function
    at HTMLInputElement.oninput

I do not know how to reference the method for that particular object in this.slider.setAttribute('oninput','WhatShouldIPutHere'),so that the text box for only that object gets changed.

@D.Pardal I guess you wanted the full code on the template side, I added it. — REVOLUTION
– REVOLUTION, Commented May 15, 2020 at 12:27

epascarello · Accepted Answer · 2020-05-18 20:57:35Z

You should be binding event listeners with addEventListener. You should be binding to the method with this, not the class name. Set the value property, do not set an attribute.

class OninputClassDemo extends HTMLElement {
  constructor() {
    super();

    const shadow = this.attachShadow({
      mode: 'open'
    });

    this.parent = document.createElement('div');

    this.slider = document.createElement('input');
    this.slider.setAttribute('type', 'range');
    this.slider.setAttribute('min', '0');
    this.slider.setAttribute('max', '99');
    this.slider.setAttribute('value', '0')

    this.text = document.createElement('input');
    this.text.setAttribute('type', 'text');
    this.text.setAttribute('value', '');

    this.parent.appendChild(this.slider);
    this.parent.appendChild(this.text);
    shadow.appendChild(this.parent);

    this.slider.addEventListener('input', (event) => this.changeValue());

  }

  changeValue() {
    this.text.value = this.slider.value;
  }
}

window.customElements.define('demo-element', OninputClassDemo);

<demo-element></demo-element>

D. Pardal · Accepted Answer · 2020-05-15 11:56:17Z

0

You should write

changeValue() {
    this.text.setAttribute('value',this.slider.getAttribute('value'));
}

instead of

changeValue = function(){
    this.text.setAttribute('value',this.slider.getAttribute('value'));
}

answered May 15, 2020 at 11:56

D. Pardal

6,6821 gold badge23 silver badges46 bronze badges

1 Comment

REVOLUTION Over a year ago

getting the error Uncaught TypeError: OninputClassDemo.changeValue is not a function at HTMLInputElement.oninput when I move the slider.

Collectives™ on Stack Overflow

Javascript custom element's oninput function issue

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related