Show size of screen and viewport

I realise this page
No description
6 Replies
Pat66
Pat6610mo 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
Jochem10mo 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
Pat6610mo 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
Jochem10mo ago
that's because you're using let, that redeclares the variables in the current scope remove let
Pat66
Pat6610mo ago
now I have this
No description
Jochem
Jochem10mo 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
Want results from more Discord servers?
Add your server