<!DOCTYPE html>
<html>
<head>
<script>
function add_post (contents){
const post = document.createElement('div');
post.id = contents;
post.className = 'post';
post.innerHTML = contents;
post.id = contents;
const remove = document.createElement('button');
remove.className = 'remove';
remove.innerHTML = 'Remove';
post.append(remove);
document.querySelector('#posts').append(post);
};
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#send').onclick = () => {
contents = document.querySelector('#message').value;
add_post(contents);
};
document.querySelectorAll('#posts').forEach((element) => {
element.onclick = () => {
document.querySelector('#info').innerHTML = element.id;
document.querySelector('#info1').innerHTML = element.innerHTML;
};
});
document.querySelectorAll('.post').forEach((element) => {
//element.onclick = () => {
document.querySelector('#info2').innerHTML = element.className;
//};
});
});
</script>
</head>
<body>
<h2 id="info">info</h2>
<h2 id="info1">info1</h2>
<h2 id="info2">info1</h2>
<input id="message" autocomplete="off" placeholder="Say something" type="text">
<button id="send">send</button>
<div id="posts">
</div>
</body>
</html>
Witam
Dlaczego document.querySelector('#info').innerHTML = element.id; wyświetla 'posts' a nie to co zostało wpisane?
(id diva a nie posta którego kliknąłem)
A w drugim przypadku document.querySelectorAll('.post').forEach((element) => { gdy zaznaczam klasę dlaczego nic się nie dzieje ?
Dzięki