The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Three script problems in my HTML document
HAJM
post Feb 18 2021, 12:40 PM
Post #1





Group: Members
Posts: 6
Joined: 17-February 21
Member No.: 27,804



This is my first post to this forum and I am not sure which category I should use. I hope CSS is the correct choice.

I have only a superficial knowledge of HTML and CSS and have created the following HTML document by copying bits of HTML/CSS from examples on the web and modifying and extending them myself, so there are some bits of it that I don't really understand, although I think I do understand most of it.

CODE

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<style>
.bR {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 10px;
  text-align: center;
  margin: 2px 2px;
  font-size: 16px;
  color: Red;
  cursor: pointer;
}
.slidecontainer {
  width: 40%;
}
.slider {
  -webkit-appearance: none;
  width: 30%;
  height: 60px;
  border-radius: 10px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.slider:hover {
  opacity: 1;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
</style>
</head>
<script>
  function tx(action) {
    document.getElementById("msg").innerHTML = action;
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("action").innerHTML =
      this.responseText;
    }
  }
     xhttp.open("GET", "/changeAction?action=" + action, true);
    xhttp.send();
  }
  function plus1() {
    var v = document.getElementById("slider1").value;
     document.getElementById("slider1").value = v + 1;
    document.getElementById("value1").innerHTML =
    document.getElementById("slider1").value;
     tx("+1");
  }
  function minus1() {
    var v = document.getElementById("slider1").value;
     document.getElementById("slider1").value = v - 1;
    document.getElementById("value1").innerHTML =
    document.getElementById("slider1").value;
    tx("-1");
  }
  function plus2() {
    var v = document.getElementById("slider2").value;
     document.getElementById("slider2").value = v + 1;
    document.getElementById("value2").innerHTML =
    document.getElementById("slider2").value;
    tx("+2");
  }
  function minus2() {
    var v = document.getElementById("slider2").value;
     document.getElementById("slider2").value = v - 1;
    document.getElementById("value2").innerHTML =
    document.getElementById("slider2").value;
    tx("-2");
  }
  function slider1Input() {
    document.getElementById("value1").innerHTML =
    document.getElementById("slider1").value;
    tx("Slider1");
  }  
  function slider2Input() {
    document.getElementById("value2").innerHTML =
    document.getElementById("slider2").value;
    tx("Slider2");
  }  
// Update the current slider value (each time you drag the slider handle)
  s1.oninput = function() { v1.innerHTML = this.value; }  
</script>
<body>
<p id=msg>"Ready"</p>
<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="slider1" oninput="slider1Input()">
<button class="bR" onclick="plus1()")>+</button>
<button class="bR" onclick="minus1()")>-</button>
  <input type="range" min="1" max="100" value="50" class="slider" id="slider2" oninput="slider2Input()">
<button class="bR" onclick="plus2()")>+</button>
<button class="bR" onclick="minus2()")>-</button>
</div>
<p id="value1">?</p>
<p id="value2">?</p>
</body>
</html>


The document displays a <p> element, "msg", a slider, "slider1", two buttons, "+1, "-1", then another slider, "slider2", and two more buttons, "+2", "-2", and finally two more <p> elements, "value1' and "value2" When a slider is clicked or dragged or a button clicked, the name of the control is displayed in the "msg" element for diagnostic purposes. Also when the value of a slider changes for any reason the new value is displayed in the corresponding "value" element, again for diagnostic purposes. These display parts of the document all seem to work correctly.

1. When a "+"/"-" button is clicked, the numeric value of the corresponding slider should be increased/decreased by 1. The "-" buttons work as intended, but the "+" buttons seem to treat the value as a string and append the character '1' on the end. Thus, for example, "8" becomes "81". Any value greater or equal to 10 is displayed as 100, presumably because "10" becomes "101" and so on. The slider position does correctly move to whatever value is actually set by the buttons. Why do the "+" buttons not increment the slider value correctly? The code for the "+" and "-" buttons seems identical apart from the + and - operators.

2. As written, the sliders and buttons are all display horizontally in line. I would like the pairs of "+"/"-" buttons to be displayed vertically above each other and positioned so that they are centred vertically with the sliders. Can I do this and, if so, how?

3.The original code that I copied from the web had the following lines in the script section, just before the comment line about updating the current slider value.

CODE

var s1 = document.getElementById("slider1");
var v1 = document.getElementById("value1");
v1.innerHTML = s1.value; // Display the default slider value


Removing these lines had no apparent effect on the behaviour of the web page, even though they contain the declarations of the variables "s1" and "s2" which are used in the line following the comment. On the other hand, removing the line following the comment, stops the values being displayed when the sliders/buttons are dragged or clicked and, bizarrely, also stops the "msg" element being written. Although this is not affecting the apparent functioning of the web page, I feel that it reveals some underlying inconsistency with the document that will cause me trouble in the future, as I have to add other elements to the document. Particularly puzzling is that removing this section affects the behaviour of "slider2" although it is not mentioned in the section. Can anyone explain what is wrong?

To keep things simple, I would be happy to receive separate replies to each question.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 18 2021, 01:22 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(HAJM @ Feb 18 2021, 06:40 PM) *

1. When a "+"/"-" button is clicked, the numeric value of the corresponding slider should be increased/decreased by 1. The "-" buttons work as intended, but the "+" buttons seem to treat the value as a string and append the character '1' on the end. Thus, for example, "8" becomes "81".

Javascript treats form field values as strings by default. To force the values into numbers, you can use tricks like multiplication:

CODE
1*x+1*y;

or
CODE
Number(x)+Number(y)

(subtraction also seems to force numbers, just like you noted).

See also e.g. http://www.quirksmode.org/js/strings.html#stringnum






User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
HAJM
post Feb 18 2021, 01:59 PM
Post #3





Group: Members
Posts: 6
Joined: 17-February 21
Member No.: 27,804



Thanks to Christian J for the information about numbers and strings in javascript. That solved the problem.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 18 2021, 02:26 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(HAJM @ Feb 18 2021, 06:40 PM) *

2. As written, the sliders and buttons are all display horizontally in line. I would like the pairs of "+"/"-" buttons to be displayed vertically above each other and positioned so that they are centred vertically with the sliders. Can I do this and, if so, how?


Here's one idea:

CSS
CODE
input.slider, div.plus-minus {
vertical-align: middle;
}

div.plus-minus {
display: inline-block;
width: 24px;
}


HTML
CODE
<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="slider1" oninput="slider1Input()">

<div class="plus-minus">
<button class="bR" onclick="plus1()")>+</button>
<button class="bR" onclick="minus1()")>-</button>
</div>

BTW, those red +/- buttons are very hard to see, both because if the size and the red color. The sliders are also hard to recognize due to the non-standard styling.



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 18 2021, 02:32 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(HAJM @ Feb 18 2021, 06:40 PM) *

3.The original code that I copied from the web had the following lines in the script section, just before the comment line about updating the current slider value.

CODE

var s1 = document.getElementById("slider1");
var v1 = document.getElementById("value1");
v1.innerHTML = s1.value; // Display the default slider value


That part seems to be handled here, just in a different way:

CODE
  function plus1() {
    var v = document.getElementById("slider1").value;
     document.getElementById("slider1").value = v + 1;
    document.getElementById("value1").innerHTML =
    document.getElementById("slider1").value;

I haven't tested the script, though.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 18 2021, 05:00 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Feb 18 2021, 07:22 PM) *

QUOTE(HAJM @ Feb 18 2021, 06:40 PM) *

1. When a "+"/"-" button is clicked, the numeric value of the corresponding slider should be increased/decreased by 1. The "-" buttons work as intended, but the "+" buttons seem to treat the value as a string and append the character '1' on the end. Thus, for example, "8" becomes "81".

Javascript treats form field values as strings by default. To force the values into numbers, you can use tricks like multiplication:

CODE
1*x+1*y;

or
CODE
Number(x)+Number(y)

(subtraction also seems to force numbers, just like you noted).

See also e.g. http://www.quirksmode.org/js/strings.html#stringnum


Yes, but why does the value always end up as '100' even if it's, say, 58 to begin with?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 18 2021, 08:11 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Feb 18 2021, 11:00 PM) *

Yes, but why does the value always end up as '100' even if it's, say, 58 to begin with?

Where does that happen? unsure.gif

"58+1" should become "581" if it was strings.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 19 2021, 04:53 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Feb 19 2021, 02:11 AM) *

QUOTE(pandy @ Feb 18 2021, 11:00 PM) *

Yes, but why does the value always end up as '100' even if it's, say, 58 to begin with?

Where does that happen? unsure.gif

"58+1" should become "581" if it was strings.


So thought I. If you drag the slider down (or click the minus button) so the value gets well below 100 and then click the plus button the value becomes 100, no matter what you set it to with the slider/minus button. Goes for both the left and right instances.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
HAJM
post Feb 19 2021, 06:02 AM
Post #9





Group: Members
Posts: 6
Joined: 17-February 21
Member No.: 27,804



I think "58"+1 does become "581" but because the range of the slider is limited to 1-100 the 581 is capped at 100. -- HAJM.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 19 2021, 06:23 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Right! The printed value isn't from the calculation, it's taken from the slider value.
CODE

document.getElementById("value1").innerHTML =
    document.getElementById("slider1").value;


Thanks. I stared so much at the calculation that I didn't notice.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
HAJM
post Feb 19 2021, 07:10 AM
Post #11





Group: Members
Posts: 6
Joined: 17-February 21
Member No.: 27,804



Thanks to Christian J for the CSS and HTML code to make the buttons display vertically. It works perfectly. As to the size and colour, I am ok with the size and I can adjust the colour later, as I have a list of HTMl colour names and #codes. A minor problem though, is how to make the + and - display centrally in the button, both horizontally and vertically. Any suggestions about this would be welcome. The sliders are a non-standard shape to match some other controls, not shown in my code for brevity, which I need in my final web page.

As to the third question, the value1 and value2 elements are indeed updated in the plus1, minus1, plus2 and minus2 functions, as I intended them to be. That is why I thought I could and should remove the lines before and after the comment "// Update the current slider value". What I could not understand was why removing the line following the comment caused the page to malfunction. After I have made the changes to fix the first two problems I now find that removing the redundant lines no longer causes the page to malfunction. I still don't understand, but hopefully the third problem has now gone for good.

Thanks to Christian J and Pandy for helping me with my problems. Much appreciated!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 19 2021, 12:50 PM
Post #12


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(HAJM @ Feb 19 2021, 01:10 PM) *

A minor problem though, is how to make the + and - display centrally in the button, both horizontally and vertically.

Seems a zero padding fixes it. But it's strange that only the button with the "+" character is affected.

QUOTE
What I could not understand was why removing the line following the comment caused the page to malfunction.

Not sure I followed that, but this part no longer does anything:

CODE
// Update the current slider value (each time you drag the slider handle)
  s1.oninput = function() { v1.innerHTML = this.value; }

since there is no longer any s1 that could trig the oninput event, so you might as well delete it.

QUOTE
Thanks to Christian J and Pandy for helping me with my problems. Much appreciated!

You're welcome!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 03:21 AM