2

I want to create a component in javaScript which will be called on click of button.

With the help of this (https://ayushgp.github.io/html-web-components-using-vanilla-js-part-3/) i able to create the component but this component is called on load of page itself.

I want to call component on click of button in javaScript. Thanks in advance.

Harshit Singh
  • 21
  • 2

1 Answers1

0

From the link which you gave, I believe that this is the code which you are running.

<html>
<head>
  <title>Web Component</title>
</head>
<body>
  <input type="text" onchange="updateName(this)" placeholder="Name">
  <input type="text" onchange="updateAddress(this)" placeholder="Address">
  <input type="checkbox" onchange="toggleAdminStatus(this)" placeholder="Name">
  <user-card username="Ayush" address="Indore, India" is-admin></user-card>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.14/webcomponents-hi.js"></script>
  <script src="/UserCard/UserCard.js"></script>
  <script>
    function updateAddress(elem) {
      document.querySelector('user-card').setAttribute('address', elem.value);
    }
    function updateName(elem) {
      document.querySelector('user-card').setAttribute('username', elem.value);
    }
    function toggleAdminStatus(elem) {
      document.querySelector('user-card').setAttribute('is-admin', elem.checked);
    }
  </script>
</body>
</html>

It is the <user-card .... ></user-card> portion which creates the component in the page because user-card is registered as a custom element and the element is rendered as soon as the page loads.

If you want to create this card on the click of a button, you need to remove user-card from the body, register an onClik listener to a button which will insert the user-card element in the document body.

Sample Code:

<html>
<head>
  <title>Web Component</title>
</head>
<body>
  <input type="text" onchange="updateName(this)" placeholder="Name">
  <input type="text" onchange="updateAddress(this)" placeholder="Address">
  <input type="checkbox" onchange="toggleAdminStatus(this)" placeholder="Name">
  <button onClick="loadCard()">LOAD THE CARD</button>
  <div id="card_holder"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.14/webcomponents-hi.js"></script>
  <script src="/UserCard/UserCard.js"></script>
  <script>
    function loadCard(){
      document.getElementById('card-holder').innerHTML = '<user-card username="Ayush" address="Indore, India" is-admin></user-card>';
    }
    function updateAddress(elem) {
      document.querySelector('user-card').setAttribute('address', elem.value);
    }
    function updateName(elem) {
      document.querySelector('user-card').setAttribute('username', elem.value);
    }
    function toggleAdminStatus(elem) {
      document.querySelector('user-card').setAttribute('is-admin', elem.checked);
    }
  </script>
</body>
</html>
Davis
  • 85
  • 2
  • 8
  • Thanks for reply sir. But in this case username and address are predefine. If user try to enter its own input that is not coming after clicking submit button. Can you tell me how to achieve it. Thanks once again for reply – Harshit Singh Apr 05 '19 at 09:04
  • This is not a specific issue. Stack Overflow is intended to solve specific issues. You need to learn basics of JavaScript to achieve what you're asking. Here is a good tutorial: https://www.w3schools.com/js/default.asp – Davis Apr 05 '19 at 12:15