We Keep Coding

TypeError: Cannot read properties of null (reading 'addEventListener') javascript

I am trying to add a button but it is showing me this error.
here is my html code
<div card-container>
<template class="mainTemplate">
<div class="cards">
<div class="card">
<img data-image src="" alt="">
<div data-title class="header"></div>
<div data-body class="body"></div>
<button data-button class="btn">read more</button>
<p data-paragraph class="fullText"></p>
</div>
</div>
</template>
</div>
here is the javascript code
let showDitail = document.querySelector(".btn");
showDitail.addEventListener("click", showMore);
function showMore(){
alert("e")
}

You're using the <template> tag, which is an element that holds html markup but it's not rendered on page load.
In order to render its contents, one has to handle the <template> element via javascript, using the html structure as - in fact - a template for filling another structure (a table, a divs grid, etc.).
Since the sub-elements of <template> are not part of the DOM yet, let showDitail = document.querySelector(".btn"); will result in null. That's why you cannot bind events to it.
Either change the tag to something else (a div maybe), or handle the template properly via javascript.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
let showDitail = document.querySelector(".btn");
showDitail.addEventListener("click", showMore);
function showMore(){
alert("e")
}
<div card-container>
<div class="mainTemplate">
<div class="cards">
<div class="card">
<img data-image src="" alt="">
<div data-title class="header"></div>
<div data-body class="body"></div>
<button data-button class="btn">read more</button>
<p data-paragraph class="fullText"></p>
</div>
</div>
</div>
</div>

Rearrange children orger in Javascript doesn't work multiple times

I've got the following code to move the childs order in an element. When I click once, it works fine, but when I click multiple times, it only works every 2nd or 3rd time.
const prevP = () => {
const pList = document.getElementById("project-list")
const firstProject = pList.firstChild;
const lastProject = pList.lastChild;
pList.insertBefore(lastProject, firstProject);
}
const nextP = () => {
console.log("next");
const pList = document.getElementById("project-list")
const firstProject = pList.firstChild;
let lastProject = pList.lastChild;
pList.insertBefore(firstProject, lastProject);
}
<span class="material-icons md-48 close icon-btn" onclick="prevP()"
>navigate_before</span
>
<div class="project-list" id="project-list">
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 1</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 2</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 3</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 4</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 5</p>
</div>
</div>
<span class="material-icons md-48 close icon-btn" onclick="nextP()"
>navigate_next</span
>
I also realised that sometimes the code messes up the order of the elements when using both buttons, and I have no idea why this is happening

The cause of that behaviour is that you use firstChild and lastChild. These may select text nodes with just some white space. Change these to firstElementChild and lastElementChild.
Secondly, the "Next" action should not insert the first element before the last element, but after it. For that you can use the method appendChild:
pList.appendChild(firstProject);

Javascript - Inserting Image Text and description in a container

<div id="CollectionALL">
<div id="collection1" class="col">
<img id="Img1" class="imageCS"/>
<H1 id="Title1"></H1>
<p id="Text1"></p>
</div>
<div id="collection2" class="col">
<img id="Img2" class="imageCS"/>
<H1 id="Title2"></H1>
<p id="Text2"></p>
</div>
</div>
Hi all,
I'm just starting out on javascript and would like to check how i should go about replacing or inserting an image into each of the Img1, Img2 and Img3 tags.
I believe once i'm able to figure out the image, the title and texts should be in the same method?
function displayResult()
{
var collect1=document.getElementById("img1").rows[0];
var x=collect1.insertCell(-1);
x.innerHTML="<img src='img/abc.png' alt='collection1'/>";
}

You need to specify the selectors for h1, p, img inner your container. then you can use setAttribute and innerHTML function to set content.
Then you can wrapped inside a loop and iterate the result array. The example below will shows you how it works inside the loop.
like that
function displayResult()
{
var collect = document.getElementById("collection1");
let img = collect.querySelector('img');
let h1 = collect.querySelector('h1');
let p = collect.querySelector('p');
img.setAttribute('src', "https://via.placeholder.com/100");
h1.innerHTML = "collection1";
p.innerHTML = "some text"
}
displayResult()
<div id="CollectionALL">
<div id="collection1" class="col">
<img id="Img1" class="imageCS"/>
<H1 id="Title1"></H1>
<p id="Text1"></p>
</div>
<div id="collection2" class="col">
<img id="Img2" class="imageCS"/>
<H1 id="Title2"></H1>
<p id="Text2"></p>
</div>
</div>

I'm unsure if I understood your question correctly, but if I did I see no use for JS to be used in here. Simply insert your src, title and text through the HTML.
<div id="CollectionALL">
<div id="collection1" class="col">
<img id="Img1" class="imageCS" src="img/abc.png">
<h1 id="Title1">My Title</h1>
<p id="Text1">My Text</p>
</div>
<div id="collection2" class="col">
<img id="Img2" class="imageCS" src="img/abc.png>
<h1 id="Title2">My Title</h1>
<p id="Text2">My Text</p>
</div>
</div>
note that "img" is not a tag with a closing, thus ending it with a />:
<img id="Img2" class="imageCS"/>
is not quite right. Also, tags in HTML are case-sensitive, and so "H1" is not a valid tag, but "h1" is.

var ImgA= document.getElementById("Img1");
Img1.src = "abc.jpg";
var TitleA= document.getElementById("Title1");
TitleA.textContent = "Some Title Header Thing";
var TextA= document.getElementById("Text1");
TextA.textContent = "qwerty some text";
I think i'll be doing it this way.
Seems to work
Thanks to everyone

Get Text content of 3rd <p> element inside <div> element

I have some HTML / JS code looking like this.
var bTags = document.getElementsByClassName("Wrapper");
var kind = bTags[0];
console.log(kind);
console.log(kind.childNodes[4].text);
<div class="Wrapper">
<h3 class="date" id="date">{{date}}</h3>
<div class="descriptionWrapper">
<p class="jobDescription">{{job}}</p>
<p class="jobAreaDescription">{{jobArea}}</p>
<p class="placeDescription">{{ort}}</p>
<p class="kindDescription">{{anstellung}}</p>
</div>
<div class="jobLink">
{{#custom_link jobLink}}
{{linkText}}
{{/custom_link}}
</div>
</div>
In my example the "console.log(kind);" successfully logs the HTML object. Here its not working of course because its not defined.
But somehow the childNodes[0-4].text is undefined. I just want to access the text of the p element with the class "placeDescription" of this specific parentNode.

const el = document.querySelector('.Wrapper p:nth-of-type(3)');
if (el) {
console.log(el.textContent)
}

How to find data from html and store it using jQuery

My HTML
<div class="product">
<img src="#">
<div class="priceStore">
<p data="40">Item 1</p>
</div>
</div>
How, using jQuery would I retrieve the data and store it?
My attempt:
$('.product').mousedown(function(event) {
var x = $('.priceStore').parent().find(data);
console.log(x);
});
Thanks!

There are a few different ways to write the selector but to get the value of an attribute you can use .attr()
Something like this works for this case
$('.product').mousedown(function(event) {
var x = $('.priceStore p').attr('data');
console.log(x);
});

Personally I would rewrite your HTML as follows:
<div class="product">
<img src="#">
<div class="priceStore">
<p id="data" data="40">Item 1</p>
</div>
</div>
And then access the data element like this within your Javascript:
document.getElementById("data").getAttribute('data');
Advantages:
- You don't need jQuery for this, it's basic javascript.
- You can apply an identifier to multiple elements and access/manipulate data
- Adding a second or third P tag won't break your code.
Ergo if you wanted to do so...
<div class="product">
<img src="#">
<div class="priceStore">
<p id="apple" data="40">Item 1</p>
<p id="orange" data="50">Item 2</p>
<p id="grape" data="80">Item 3</p>
</div>
</div>
You could then:
document.getElementById("apple").getAttribute('data');
document.getElementById("orange").getAttribute('data');
document.getElementById("grape").getAttribute('data');