问如何在javaScript中实现一键调用组件
EN

Stack Overflow用户

提问于 2019-04-05 05:18:38

回答 1查看 589关注 0票数 2

我想在javaScript中创建一个组件，该组件将在单击按钮时调用。

在这个(https://ayushgp.github.io/html-web-components-using-vanilla-js-part-3/)的帮助下，我能够创建组件，但是这个组件是在页面本身加载时调用的。

我想在javaScript中点击按钮调用component。提前谢谢。

javascript

html

云直播特惠9.9元起

基于腾讯云多年音视频能力积淀，支持超低延迟、超高画质、超大并发访问量的直播需求，满足客户的多样化直播需求

回答 1

Stack Overflow用户

发布于 2019-04-05 05:35:27

从你给出的链接来看，我相信这就是你正在运行的代码。

<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>

在页面中创建组件的是<user-card .... ></user-card>部分，因为user-card被注册为自定义元素，并且该元素在页面加载时立即呈现。

如果您想要在单击按钮时创建此卡片，则需要从正文中删除user-card，注册一个onClik侦听器到一个按钮，该按钮将在文档正文中插入user-card元素。

示例代码：

<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>