 Three script problems in my HTML document |
| HAJM |
 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. |
  |
 
|
Posts in this topic
HAJM Three script problems in my HTML document Feb 18 2021, 12:40 PM
Christian J
1. When a "+"/"-" button is c... Feb 18 2021, 01:22 PM
pandy
1. When a "+"/"-" button is ... Feb 18 2021, 05:00 PM Christian J
Yes, but why does the value always end up as ... Feb 18 2021, 08:11 PM pandy
Yes, but why does the value always end up as ... Feb 19 2021, 04:53 AM HAJM Thanks to Christian J for the information about nu... Feb 18 2021, 01:59 PM Christian J
2. As written, the sliders and buttons are all di... Feb 18 2021, 02:26 PM Christian J
3.The original code that I copied from the web ha... Feb 18 2021, 02:32 PM HAJM I think "58"+1 does become "581... Feb 19 2021, 06:02 AM pandy Right! The printed value isn't from the ca... Feb 19 2021, 06:23 AM HAJM Thanks to Christian J for the CSS and HTML code to... Feb 19 2021, 07:10 AM Christian J
A minor problem though, is how to make the + and ... Feb 19 2021, 12:50 PM  |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 28th April 2024 - 11:35 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC