first time posting in here :)
I have recently started coding and for JS study practice, I wanted to make a button in my navbar that generates an object to DOM after clicking it. Can you please advise the steps regarding adding and appending items that I need to create inside addToDom function? I seem to mix up the process and after multiple failures have left the space blank.
P.S. Am I linking img correctly?
My current code so far:
const Kirstin = {
firstName: 'Kirstin',
lastName: 'Ortega',
image: "img:resources/kirstin ortega.gif",
alias: 'Police officer',
getfullName: function(){
this.firstName + ' ' + this.lastName;
},
addToDom: function(firstName, lastName, image, alias, getfullName,){
}
}
const bodyElement = document.querySelector("btn1");
bodyElement.addEventListener("click", function (){
addToDom(this.firstName, this.lastName, this.image, this.alias, this.getfullName);
});
UPDATE I am trying to replicate the same structure in HTML file as follows:
<article class = "articleTakeshi">
<div class="cardTakeshi">
<img src="resources/takeshi kovacs.gif" alt="Avatar">
<div class="container">
<h2>Takeshi Kovacs</h2>
<p>The Last Envoy</p>
</div>
</div>
</article>
So basically my goal is to create a new article with the same structure as pictured above using Javascript.
Try this:
<html>
<body>
<button id="btn1">Add</button>
<div id="list">
<article class="articleTakeshi">
<div class="cardTakeshi">
<img src="https://www.gravatar.com/avatar/6c488c6599d9a5855d7a5e5dbef2883f?s=48&d=identicon&r=PG"
alt="Avatar">
<div class="container">
<h2>Takeshi Kovacs</h2>
<p>The Last Envoy</p>
</div>
</div>
</article>
</div>
<script>
function createElementFromHTML(htmlString) {
var div = document.createElement('div');
div.innerHTML = htmlString.trim();
// Change this to div.childNodes to support multiple top-level nodes.
return div.firstChild;
}
const Kirstin = {
firstName: 'Kirstin',
lastName: 'Ortega',
image: "https://graph.facebook.com/10219900817020254/picture?type=large",
alias: 'Police officer',
}
const
addToDom = function ({
firstName,
lastName,
image,
alias,
getfullName
}) {
function render() {
return createElementFromHTML(`
<article class="article${firstName}">
<div class="card${firstName}">
<img src="${image}" alt="Avatar">
<div class="container">
<h2>${firstName} ${lastName}</h2>
<p>${alias}</p>
</div>
</div>
</article>
`)
}
document.querySelector("#list").appendChild(render())
}
const bodyElement = document.querySelector("#btn1");
bodyElement.addEventListener("click", function () {
addToDom(Kirstin);
});
</script>
</body>
</html>
How it works?
createElementFromHTML will create DOM element from html string.
When click the button whose id is btn1, addToDom is called with argument Kirstin which is a object.
Function addToDom will extract all fields:
firstName,
lastName,
image,
alias,
getfullName
as function local variables.
and using these variables, the render function returns a rendered html string, and we convert it to a DOM. Then we add it to the end of #list.