javascript - getElementById for button that is dynamically created
问题描述
I want to be able to do stuff after a button is clicked, but the button is dynamically created and when I try to access the button by ID it returns null.
I'm using a base script and editing it, so I'm not sure how to access the element with the way the template html is loading.
Here is what I have, and where I am trying to access the element
var mainContainer = document.getElementById('js-main-container'),
loginContainer = document.getElementById('js-login-container'),
loginButton = document.getElementById('js-btn-login'),
background = document.getElementById('js-background');
var spotifyPlayer = new SpotifyPlayer();
var spotifyApi = new SpotifyWebApi();
var template = function (data) {
return `
<div class="main-wrapper">
<div class="now-playing__img">
<img src="${data.item.album.images[0].url}">
</div>
<div class="now-playing__side">
//======button i want to access
<button class="btn btn--play" id="js-btn-play">Play a song</button>
<div class="now-playing__name">${data.item.name}</div>
<div class="now-playing__artist">${data.item.artists[0].name}</div>
<div class="now-playing__status">${data.is_playing ? 'Playing' : 'Paused'}</div>
<div class="progress">
<div class="progress__bar" style="width:${data.progress_ms * 100 / data.item.duration_ms}%"></div>
</div>
</div>
</div>
<div class="background" style="background-image:url(${data.item.album.images[0].url})"></div>
`;
};
spotifyPlayer.on('update', response => {
mainContainer.innerHTML = template(response);
});
spotifyPlayer.on('login', user => {
if (user === null) {
loginContainer.style.display = 'block';
mainContainer.style.display = 'none';
} else {
loginContainer.style.display = 'none';
mainContainer.style.display = 'block';
spotifyApi.setAccessToken(spotifyPlayer.accessToken);
var playContainer = document.getElementById("js-btn-play");
playContainer.addEventListener('click', () => {
// ======Do Stuff here, but playContainer is null
});
}
});
loginButton.addEventListener('click', () => {
spotifyPlayer.login();
});
spotifyPlayer.init();
Edit: HTML
<!doctype html>
<html lang="en">
<head>
<title>Spotify Application</title>
<link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body bgcolor=white>
<div class="container">
<div class="login-container hidden" id="js-login-container">
<button class="btn btn--login" id="js-btn-login">Login with Spotify</button>
</div>
<div class="main-container hidden" id="js-main-container"></div>
</div>
<script src="https://spotify-player.herokuapp.com/spotify-player.js"></script>
<script type="text/javascript" src="static/js/spotify-web-api-js.js"></script>
<script type="text/javascript" src="static/js/script.js"></script>
</body>
解决方案
推荐阅读
- vue.js - b-输入模型具有字符串类型的值
- android - 构建我的 apk 时如何减小 xml 资产的大小
- arduino - ESP32 或 Arduino 上的 I2C:使用 BMP388 传感器的最大从机数量是多少
- rust - Supertrait 仅当 Self : Sized
- java - 如何将 java 文件编译为使用其他 .class 的 .class。(如果它是可能的)
- python - Keras 模型未能减少损失
- jquery - 如何通过单击 ul 列表中的第一个 li 元素来切换 li 元素?
- c# - 带有文件和字典的 AspNetCore3 多部分帖子未按预期工作
- symfony - 一些 OneToMany 关系作为对象返回,一些作为 IRI - API-Platform
- python - 如何在 OpenCV 中进行变形?