change input NaN in non-chromium Edge browsers

[jodunno]

i have a range slider and i use it to change the innerhtml of a label element to reflect the slide through the range. the code did not work until i added both onchange and oninput to the form element. I believe that ie browser requires onchange to work. I can't remember why i need both methods.

All was working when it was inline. I now try to add both change and input as events attached to an external javascript file. The change and input works in chrome, new edge browser, firefox, ie and opera. The new code breaks in older Edge browsers. what is the problem? it works in Edge when the javascript is inline.

Edge doesn't show the slider track and displays Nan when i try to use the slider thumb. Anyone know why? By the way, i can never get events to work for me. I have no idea why. I found a site with code that uses DOMContentLoaded and now my events work. So i stick with this code. I am not a JavaScript guru.

event code:
 

document.addEventListener('DOMContentLoaded', function () {

document.getElementById('MySlider').addEventListener('change', function () {
  var MyRange = document.getElementById('MySlider').value;
  MySlideFunction(MyRange);

});

});

Again, when the code is inline everything works in Edge.

<form onchange="" oninput="">

Thank you for any help.

[jodunno]

Hello again,

I've made progress with this problem. When inline it is working, so i checked my event code. Somehow the following code doesn't make sense to me. Perhaps it is not the correct method of acquiring updates numbers (slides through the range).

document.getElementById('MyRangeLabel').innerHTML=MySlider.value;

my slider works in Edge when i remove this code from the javascript. I can't figure out a way to update the innerHTML as i slide through the ranges. Anyone able to offer a solution?
 

<label for="MySlider">TestRanges: <span id="MyRangeLabel">0</span></label>

<input type="range" min="0" max-"5" value="0" id="MySlider" step="1">

onchange and oninput: how do i take the new range when sliding and change the innerHTML of the MyRangeLabel span?

Thank you for any help.

[requinix]

I don't see where MySlider is defined. What's your complete code now?

[jodunno]

On 6/9/2020 at 8:20 PM, requinix said:

I don't see where MySlider is defined. What's your complete code now?

Hi requinix,

I'm sorry for the delay. I've been so busy the past few days. I've also recoded this slider since my last post. I've tested this slider and script for days now and it still breaks in Edge 38 on my work pc. Today i tried the code with Edge 44 on my Mother-in-law's computer and it works. Something must be corrupted with Edge on my work pc. I have no idea what is the problem. It seems like Edge 38 on my system is trying to apply all of my custom css instead of just -ms commands. I removed the -ms commands and the webkit code was displayed as well as NaN disappeared. I'll move on from this. I have the new chromium Edge and i can always test old Edge on my Mother-in-law's pc.

Thank you.

[requinix]

I doubt it's broken. More like Edge updated something between versions 38 and 44 to work better.

[jodunno]

5 hours ago, requinix said:

I doubt it's broken. More like Edge updated something between versions 38 and 44 to work better.

Hi requinix,

I am torn between version differences and corruption because i started having problems with Edge when i set cache control to no-store. Honestly. All of my css was breaking and it worked just fine up to the nostore change in xampp. I panicked and tried to fix the possible problems and it snowballed out of control. I almost wanted to cry about it because i've worked hard on my website now for three years. it is very upsetting. I decided to download the new edge and see if it works in new edge. I decided to place old edge browsers in the unsupported browsers section of my system requirements. i hate to do that but i am not a fan of browser detection and customized code. I never use browser detection in fact.

Anyway, i've spent the past three weeks recoding my site. Everything that used to work in Edge is no longer working. I do remember downloading a critical update and installing it last year. Maybe something has changed since then. it just seems like Edge is broken somehow. Everything worked until the nostore policy. I cannot figure it out.

By the way, i have two computers for different purposes: the one i am using to type here now is my internet computer. The other computer is my work computer which i never connect to the internet on the work computer. i activated my Windows system at purchase and never reconnected. I like to keep it clean and protect my files from the world.

I have given up on this issue because i cannot find the problem. I have no idea why my code started breaking. little things like wobbly transitions, slow transitions, no word breaking when i explicitly code it, etc. so many things have gone wrong since i changed my cache control.

On a positive note: i've cleaned my code and i am now in the reusable css group :-) I've also implemented image sprites which i've never done before, so the site is actually better now. I still wonder what happened. The exact same code inline was working last year. I am stumped.

Best wishes.

[requinix]

Caching isn't bad, you know. As long as you're not using Expires, it's totally okay to tell clients that they can cache stuff. Mostly assets like CSS and Javascript and images - things that don't change often. In fact you should do that to help reduce stress on your server and your wallet.

[jodunno]

sensitive data has many meanings. my site will be subscription based and member content is sensitive in my opinion. I don't want my private pages cached. one must pay me to view my work. I only use servers with unlimited data rates. My files are small. css is a bit large at 50kb for all site content but my html pages are typically under 10kb. I'm not concerned with cache. big tech companies do the opposite: 12kb css and a whopping 400+kb pages. I can see why they need that cache 🙂 I'd like to cache some things but caching headers are clear: cache or no cache (nostore). Private is not guaranteed so nostore is the best option for me. I've tried to find ways to reduce my code as much as possible. I am happy with 50kb css and 10kb pages. 15kb of the css is background photo data because i use a content security policy which disallows unsafe inline. I have no other way to allow background images other than including the css change in the css file and using php to dynamically write the selection to the body class. body class="myclass userselectedbg"I once tried using php tp dynamically create css files but it didn't work out very well. sometimes the css was missing and the data was broken (caching revalidation problem i guess).