如何在JavaScript中单击按钮时调用组件

Question

I want to create a component in javaScript which will be called on click of button. 我想在javaScript中创建一个组件，单击按钮即可调用该组件。

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. 借助于此（ https://ayushgp.github.io/html-web-components-using-vanilla-js-part-3/ ），我能够创建组件，但是在页面本身加载时会调用此组件。

I want to call component on click of button in javaScript. 我想在javaScript中单击按钮时调用组件。 Thanks in advance. 提前致谢。

Answer 1

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. <user-card .... ></user-card>部分在页面中创建组件，因为user-card已注册为自定义元素，并且该元素在页面加载后立即呈现。

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. 如果要通过单击按钮来创建此卡，则需要从主体中删除user-card ，将onClik侦听器注册到将在文档主体中插入user-card元素的按钮上。

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>

如何在JavaScript中单击按钮时调用组件

问题描述

1 个解决方案

解决方案1
0 2019-04-05 05:35:26

如何在JavaScript中单击按钮时调用组件

问题描述

1 个解决方案

解决方案1 0 2019-04-05 05:35:26

解决方案1
0 2019-04-05 05:35:26