Question 10833 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

innerHTML to show the value on web – Jquery

enter image description here

enter image description here

enter image description here

THis is three pic that i use input and innerHTML to show the value on the website.
but when the value on different digit,it couldn’t that the value still keep in center.

Here is the code:

const inputRange = document.querySelector("#inputRange");
const dotDisplay = document.querySelector(".dotDisplay-show"); inputRange.addEventListener("input", (e) => {
    const V = inputRange.value;
    console.log(V);
    dotDisplay.innerHTML = V;
  });
.underline{
  position:absolute;
  width:35px;
  border-bottom:2px solid #000;
  left:245px;
  top:105px;
}
.dotDisplay {
  color:#32608D;
  position:absolute;
  font-size: 20px;
  font-weight: bold;
}

.dotDisplay-show{
  left:255px;
  top:80px;
}
<input type="range" min="0" max="200" step="1" value="0" id="inputRange">
<div class="underline"></div>
<div class="dotDisplay dotDisplay-show">--</div>
Tags:

3

Answers


  1. 0

    You could directly add the border on the element that displays the number, with a certain amount of padding.

    const inputRange = document.querySelector("#inputRange");
const dotDisplay = document.querySelector(".dotDisplay-show");
inputRange.addEventListener("input", (e) => {
  const V = inputRange.value;
  dotDisplay.innerHTML = V;
});
    .dotDisplay {
  color: #32608D;
  position: absolute;
  font-size: 20px;
  font-weight: bold;
  border-bottom: 2px solid #000;
  padding-left: 10px;
  padding-right: 10px;
}

.dotDisplay-show {
  left: 255px;
  top: 80px;
}
    <input type="range" min="0" max="200" step="1" value="0" id="inputRange">
<div class="dotDisplay dotDisplay-show">--</div>
    Login or Signup to reply.
  2. 0

    The following solution sets margin-left and margin-right to auto to center the 35px <div> and text-align: center to center the number within it.

    const inputRange = document.querySelector("#inputRange");
const dotDisplay = document.querySelector(".dotDisplay");
inputRange.addEventListener("input", (e) => {
  const V = inputRange.value;
  console.log(V);
  dotDisplay.innerHTML = V;
});
    .dotDisplay {
  text-align: center;
  margin-left: auto; margin-right: auto;
  width: 35px;
  font-size: 20px;
  font-weight: bold;
  color: #32608D;
  border-bottom: 2px solid #000;
}
    <input type="range" min="0" max="200" step="1" value="0" id="inputRange">
<div class="dotDisplay">--</div>
    Login or Signup to reply.
  3. 0

    Ok, before answer your question with a ready to copy-paste code I’ll explain what you have done wrong, so that in the next it not happens.

    Basically you have two elements that are strongly related: The div ‘underline’ and the div ‘dotDisplay’.

    If they are strongly related you automatically need to think that they probably need to be inside a container:

    <div class="container">
   <div class="underline"></div>
   <div class="dotDisplay dotDisplay-show">--</div>
</div>

    Ok, but this will not solve the problem. To solve the problem we need to change the CSS too, because the positioning code of the counter and its underline will need to be placed on the container style:

        .container{
      position:absolute;
      width: fit-content;   /*Necessary to adjust the container width to 
                            its content size*/
                            
      left:255px;           /*Positioning code now placed here*/
      top:80px;             /*Positioning code now placed here*/
      text-align: center;   /*This line is the key to solve the problem*/
    }

    .dotDisplay {
      color:#32608D;
      font-size: 20px;
      font-weight: bold;
      width: 100%;          /*The size of the display will be always
                            equal to the size of the container 
                            (100% is relative to its parent size)*/
    }

    .underline{
      width:35px;           /*The size here will determine the container`s size.
                            this means that the display size will be always equals to
                            its underline element, making a consistent visual */
                            
      border-bottom:2px solid #000;
    }

    And the last thing that we need to change is the order of the elements on HTML. On your example the underline element is one line above the display element, but in the screen the UNDERline needs to be beneath. Obviously you can change this with CSS but let’s do things simply:

    <div class="container">
   <div class="dotDisplay dotDisplay-show">--</div>
   <div class="underline"></div>
</div>

    Now your code is right. Other things that I would change is the container positioning because now you are using absolute values, and this is a bad practice if you are thinking (and you should) on responsive web sites.

    =)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search