Uncaught TypeError: Cannot set property 'src' of null Src is not null

0
votes

Hi getting console errors for The Following Script

function setPanels()
{
    var windowWidth = window.innerWidth;
    if(windowWidth < 700)
    {
        document.getElementById('border1').src = '<?php echo home_url(); ?>/wp-content/uploads/2020/08/PageBorder1-e1597907750528.png';
    }
    else{
        document.getElementById('border1').src = '<?php echo home_url(); ?>/wp-content/uploads/2020/08/PageBorder1.3.png';
    }
}

I understand its refering to the Bottom Else Being null but what is null about this expresion?

Error:

Uncaught TypeError: Cannot set property 'src' of null

Is there a way to Ignore the error ? So that it doesn't keep iterating on the console

2
javascripthtmlcss
It's saying your document which has no element with ID border1 – tmhao2005
Can you show your HTML code? – user13907403

2 Answers

2
votes

You should check if border1 element exists first.

var element = document.getElementById("border1");

if(typeof(element) != 'undefined' && element != null){
   // Your code here...
}
0
votes

Aboce Code is work properly.

Check This one

 var windowWidth = window.innerWidth;
    if(windowWidth < 700)
    {
        document.getElementById('border1').src = 'https://cdn.pixabay.com/photo/2020/06/26/00/25/summer-5341326_960_720.jpg';
        
    }
    else{
       document.getElementById('border1').src =" https://cdn.pixabay.com/photo/2020/07/11/12/47/water-5393919_960_720.jpg";
        
    }
*
{
  margin:0;
  padding:0;
}
img
{
  width:100vw;
  height:100%;
 }
<html>
<head>
<title>Online PHP Script Execution</title>
</head>
<body>
    <img src="" id="border1">
    <img src="" id="border2">
</body>
</html>