Your $rows are results of "all the <tr> within <table>". It not only caught the <tr> in the table body, it also caught that in your table head, which has no <td> in it. Hence when reading that row, $cols->item(0) and $cols->item(1) both got you NULL.

You should take the hint when your code didn’t find ->nodeValue attribute in the items (hence you added the @ sign to suppress the warning).

Try to change this:

$rows = $tables->item(0)->getElementsByTagName('tr');  

into this:

$rows = $tables         ->item(0)->getElementsByTagName('tbody')         ->item(0)->getElementsByTagName('tr'); 

Now it is searching the <tr> within your <tbody> and should fix your issue with this particular HTML.

To have a more robust code, you should have checked the variables before acting on them. A type check or count check would be good.

Your selector isn’t specific enough so it’s picking up every dd.

.list-group-item > div.row > div:last-child > .row > div:first-child > dl > dd:last-child

You’re looking to traverse through .list-group-item, then to .row, then to the last div inside that element, then the child .row, then the first div, then the dl, then the last dd

you should use prefix to see it. you need to write correct way. You says that your asset folder insede your component folder same level with your html.

<source src="../../assets/videos/copro.mp4" type="video/mp4"> 

my solution was at the end that i was needed to make ajusments for every item i put in html doc. the ajusments in the code was in clickY. I calc the shift that the div makes and subtract the shift for the var. ex:

pageShift = 65; clicX = e.pageX; clicY = e.pageY-pageShift; 

You can’t use <?php tags inside each other. It makes no sense anyway – you’re already in the PHP block, you don’t need to open it again. And for similar reasons you can’t use echo inside another echo command. And again it makes no sense anyway, you’re already echoing, so why repeat the same instruction before you’ve finished the first one?

To generate the text you want, just use string concatenation with the . (dot) operator:

echo '<script type="text/javascript">   alert("'.$locationName.'");    var img = "'.$locationName.'";    document.getElementById("image_location").src = img;   </script>'; 

z-index won’t work without explicit positioning. Set position: relative on .first_div and .second_div to make your current code work as expected.

To change image onclik with javascript you need to have image with id:

<p>         <img alt="" src="https://www.userinterfaceicons.com/80x80/minimize.png"              style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"  /> </p> 

Then you could call javascript function when image is clicked:

<script language="javascript">     function changeImage() {          if (document.getElementById("imgClickAndChange").src == "http://www.userinterfaceicons.com/80x80/minimize.png")          {             document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/maximize.png";         }         else          {             document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/minimize.png";         }     } </script> 

This code will set image to maximize.png if current img.src is set to minimize.png and vice versa. For more details visit: Change image onclick with javascript link

Adding flex-direction: column; to the css for the step-divisions class will give you a start.

you see on change iam removing everything inside container then goes your logic

const select = document.getElementsByTagName('select')[0];             const container = document.getElementById('container');             select.onchange = () => {                 container.innerHTML = "";                 for (let i = 0; i < Number(select.value); i++) {                     let content = document.createElement('div');                     content.classList.add('content'); container.appendChild(content);                 }             }  

I can see the code working in both cases. You can see below that I have 2 rows of image and in each of them, the flex-box is working as expected.

.flexbox {   display: flex;   align-items: center;   justify-content: space-between;   margin: 0;   padding: 0; }  .separator {   height: 10px;   margin: 30px;   background-color: brown; }

<div class="flexbox">   <a href=”sunset.html”><img class="image1" height='150px' src="https://www.w3schools.com/html/pic_trulli.jpg" alt="A cool image">     <a>       <a href="/"><img class="image2" height="150px" src="https://www.w3schools.com/html/pic_trulli.jpg" alt="An even cooler image"></a> </div>  <div class="separator"></div>  <div class="flexbox">   <img class="image1" src="https://www.w3schools.com/html/pic_trulli.jpg" height="150px" alt="A cool image">   <img class="image2" src="https://www.w3schools.com/html/pic_trulli.jpg" height="150px" alt="An even cooler image"> </div>