-1

I set the following CSS at the top of my file:

#img1, #img2, #img3 {
  background: url("bates-sprite.jpeg");
  background-repeat: no-repeat;
  object-fit: none;
}

#img1 {object-position: 0 0;
  width:  816px; // full size 3264
  height: 612px; // full size 2448
}

This is the relevant part of my JavaScript:

    var tempDiv = document.createElement('div');
    tempDiv.setAttribute("id", "bigImg" + figNum);
    // Make tempDiv High enough to hold the scaled up image.

    // This line is causing a problem
    let imgHeight = document.getElementById("img1").clientHeight;

   // let imgHeight = "1224px";
   tempDiv.style.height = parseInt(imgHeight) + parseInt("400px") + "px";

If I set imgHeight explicitly to 1224 pixels, the function works perfectly. If instead I use clientHeight, it fails. How can I fix it?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Hobbyist
  • 29
  • 6
  • 4
    "Fails" ***how***? An error? Doesn't do what you expect? If so, what *does* it do? What [debugging](https://stackoverflow.com/questions/25385173/) have you done? – T.J. Crowder Aug 28 '22 at 09:44
  • 1
    Note that [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) is a **number**, not a string. There's no reason to use `parseInt` on it. And `parseInt("400px")` seems an oddly roundabout way to write `400`. :-) – T.J. Crowder Aug 28 '22 at 09:45
  • Re "`width: 816px; // full size 3264`": `//` is not a valid comment character sequence in CSS (only the C-style one is, `/* */`). This is also indicated by the weird ***syntax highlighting***. It *will* break in some browsers (e.g., it may ignore all or part of the rest of the CSS (terminate parsing)). – Peter Mortensen Sep 24 '22 at 10:36

1 Answers1

0

Client height will only give a number, but you need to add the type of that, also like (px, %, rem), to make it work.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Rishabh Patidar
  • 1
  • 1
  • You are both correct. By “fails” I mean further statements were not executed. To debug, I printed out a simple message to indicate everything worked up to that point. Thus I was able to locate which statement was causing the problem. – Hobbyist Aug 30 '22 at 18:02