Show size of screen and viewport

I realise this page

6 Replies

Pat66•8mo ago

my html code:

<body>
    

        <h1>Size Checker</h1>
    
    <time datetime="4:57:55 p.m"></time>
<ul>
<li class="screen">Screen:</li>
<li class="outer">Window Outer:</li>
<li class="inner">Window Inner:</li>
<li class="doc">Document:</li>
</ul>
</body>

<body>
    

        <h1>Size Checker</h1>
    
    <time datetime="4:57:55 p.m"></time>
<ul>
<li class="screen">Screen:</li>
<li class="outer">Window Outer:</li>
<li class="inner">Window Inner:</li>
<li class="doc">Document:</li>
</ul>
</body>

my code JS:

const temps=document.querySelector('time');
let actuel=new Date() .toLocaleString();
temps.innerHTML=actuel;

const screen=document.querySelector('.screen');
const outer=document.querySelector('.outer');
const inner=document.querySelector('.inner');
const doc=document.querySelector('.doc');

let valeur=document.createElement('span');
screen.appendChild(valeur);
valeur.innerHTML="";
let valeur2=document.createElement('span');
outer.appendChild(valeur2);
valeur.innerHTML="";
let valeur3=document.createElement('span');
outer.appendChild(valeur3);
valeur.innerHTML="";
let valeur4=document.createElement('span');
outer.appendChild(valeur4);
valeur.innerHTML="";



function resize(){
    let ecran=screen.width;
let largeur=window.innerWidth;
let hauteur=window.innerHeight;
let entier=document.body.clientHeight;
   let valeur=ecran;
    let valeur2=largeur;
    let valeur3=hauteur;
    let valeur4=entier;
   }
window.onresize=resize;

const temps=document.querySelector('time');
let actuel=new Date() .toLocaleString();
temps.innerHTML=actuel;

const screen=document.querySelector('.screen');
const outer=document.querySelector('.outer');
const inner=document.querySelector('.inner');
const doc=document.querySelector('.doc');

let valeur=document.createElement('span');
screen.appendChild(valeur);
valeur.innerHTML="";
let valeur2=document.createElement('span');
outer.appendChild(valeur2);
valeur.innerHTML="";
let valeur3=document.createElement('span');
outer.appendChild(valeur3);
valeur.innerHTML="";
let valeur4=document.createElement('span');
outer.appendChild(valeur4);
valeur.innerHTML="";



function resize(){
    let ecran=screen.width;
let largeur=window.innerWidth;
let hauteur=window.innerHeight;
let entier=document.body.clientHeight;
   let valeur=ecran;
    let valeur2=largeur;
    let valeur3=hauteur;
    let valeur4=entier;
   }
window.onresize=resize;

I don't have any error but nothing appear can I hav some idea about what is going wrong ? thanks by advance

Jochem•8mo ago

function resize(){
    let ecran=screen.width;
let largeur=window.innerWidth;
let hauteur=window.innerHeight;
let entier=document.body.clientHeight;
   let valeur=ecran;
    let valeur2=largeur;
    let valeur3=hauteur;
    let valeur4=entier;
   }

function resize(){
    let ecran=screen.width;
let largeur=window.innerWidth;
let hauteur=window.innerHeight;
let entier=document.body.clientHeight;
   let valeur=ecran;
    let valeur2=largeur;
    let valeur3=hauteur;
    let valeur4=entier;
   }

This doesn't do anything, other than define a bunch of variables you're redeclaring valeur-valeur4 in the scope of the function, and that scope is discarded

function resize(){
  let ecran=window.screen.width;
  let largeur=window.innerWidth;
  let hauteur=window.innerHeight;
  let entier=document.body.clientHeight;
  valeur.innerHTML = ecran;
  valeur2.innerHTML = largeur;
  valeur3.innerHTML = hauteur;
  valeur4.innerHTML = entier;
}

function resize(){
  let ecran=window.screen.width;
  let largeur=window.innerWidth;
  let hauteur=window.innerHeight;
  let entier=document.body.clientHeight;
  valeur.innerHTML = ecran;
  valeur2.innerHTML = largeur;
  valeur3.innerHTML = hauteur;
  valeur4.innerHTML = entier;
}

you also have a bunch of other errors in the rest of the code. You're appending all the spans to outer In the resize function, you're probably looking for window.screen and not just screen You're setting valuer.innerHTML to "" four times. You don't need to clear the inner html of a freshly created element, it's pointless Also, indentation and spacing may not matter for javascript, but it's vital to keep it consistent so that you can actually read your code. I'd really recommend either having something like prettier format your code, or else just get disciplined at fixing it manually. If someone submitted code to me as part of an application and it's messily indented, that entire application probably goes straight in the trash. It causes bugs and wastes time debugging and mentally parsing unreadable code. (also, as a final thing, codepens or similar really help people help you. I copy/pasted your code to one of my own because it helps a lot to see the code run and see what it does and doesn't do exactly, and then be able to edit it. A lot of people (me included when I'm tired) may or may not go to that effort and just skip your question. It took about 20 seconds, but it's work you ask the asker could do for the person trying to solve your problem, which makes it much more likely they'll help)

Pat66•8mo ago

Hi thanks for your message that s what I do before

 let valeur.innerHTML=ecran;
    let valeur2.innerHTML=largeur;
    let valeur3.innerHTML=hauteur;
    let valeur4.innerHTML=entier;

 let valeur.innerHTML=ecran;
    let valeur2.innerHTML=largeur;
    let valeur3.innerHTML=hauteur;
    let valeur4.innerHTML=entier;

but he don't work

Jochem•8mo ago

that's because you're using let, that redeclares the variables in the current scope remove let

Pat66•8mo ago

now I have this

Jochem•8mo ago

yes, because of the other issues I pointed out. You're appending everything to outer, and the screen details are in window.screen, not screen

Gaming

Programming

Show size of screen and viewport