CODEWITHSUNDEEP
javascripthtmlweb-component
Cesar
Cesar

Reputation: 447

Uncaught TypeError: Cannot set property 'value' of null with custom element

I created a web component and i gave it a method.. When the button is pressed I want the method to show "Hello" but its not working at all, I'm getting the following error:

Uncaught TypeError: Cannot set property 'value' of null

I would like to know why is this happening and how I can fix this?

My JS code:

var WC = Object.create(HTMLElement.prototype);

WC.hi= function() {
    document.getElementById("w-c").value = "Hello!";
};

var WCR = document.registerElement("w-c", {
    prototype: WC, 
    extends:'input'
});

var wc = new WCR();

var division = document.getElementById('sh');
var root = division.createShadowRoot();
root.appendChild(wc);

WC.setDimensions = function() {
    Object.defineProperty(WC, 'height', {value: 1000});
};

My HTML:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
            <h2>WEB COMPONENT</h2>
                <div id="sh"> </div>
        <script src="webcomponent.js"> </script>
            <button onclick="wc.hi()">
                    Say hi</button>
    </body>
</html>

Upvotes: 0

Views: 1027

Answers (1)

ayunami2000
ayunami2000

Reputation: 459

The element with id "w-c" does not exist. Either create it, or use document.createElement

EDIT:

var newEl = document.createElement("div");
/*apply styles here*/
newEl.id = "w-c";
document.appendChild(newEl);

Upvotes: 1

Related Questions