Zepsuty Licznik JS

Question

Hej

Co jest w tym kodzie złe? (Jest ustawione max="500" bo przy 100 (default) działa normalnie. Przy większych wartościach (powyżej 100) cały counter nie zgrywa się z elementem range).

Link: https://codepen.io/MAJO-SEARCH/pen/NWKvxKq?editors=0010

Dziękuje. 

Answer 1

Musisz w JS jeszcze zmienić

var paso = w/100;

100 na 500.

 

Ale dlaczego tak jest i dlaczego nie bierze tej wartości z pola 'max', to nie wiem, nie znam tego kodu, nie analizowałem, domyśliłem się co jest nie tak. Raczej działa. :P

Comments

Właśnie bym chciał tak zrobić ( u mnie wartość zmienna np. 500 czy 400 napisanie pod nią skryptu by była okej ale tutaj ludzie będą ustawiać różne i nie wiem jak pobrać właśnie tam tą wartość...)

---

document.querySelector('.range').max

Choć ludzie raczej powinni ustawiać takie rzeczy w inpucie, a nie w kodzie html. No, ale to wtedy po prostu pobierasz wartość inputa. Na razie zadziała to co właśnie wstawiłem. 

---

a w które miejsce ten kod mam wkleić (bo mam właśnie z JS duże problemy) pod początek gdzie są querySelector Czy gdzie?

---

var paso = w / TUTAJ

zamiast 100

---

Dobra działa, po prostu jestem DEBILEM i nie wiem jak to zrobić :) Dziękuje bardzo :) 

---

A i jeszcze mógł bym zapytać o coś? bo się mecze ze środkowaniem od paru dni (podstawowy problem programisty) jak wyśrodkować tego countera? Dokładnie element "P" żeby znalazł się w samym środku "Łezki"?

---

Dodaj do .counter:

display: flex;
justify-content: center;

i usuń ten line-height żeby ładniej wyglądało. 

---

A i jeszcze przepraszam że tak pytam tylko nie potrzebnie tworzyć nowe tematy o tym samym prawie. Dlaczego ten kod nie działa gdy wkleję go w pliku .js? a gdy dodam go w <script></script> działa? tag defer jest jakby co, kolejność ładowania skryptów też nic nie daje... Pomocy.. 

var counter = document.querySelector(".counter");
var range =  document.querySelector(".range");
var w = parseInt(window.getComputedStyle(range, null).getPropertyValue('width'));console.log(w);
w = 180;
var paso = w/document.querySelector('.range').max;
var left = window.getComputedStyle(counter, null).getPropertyValue('left');
var modifyValueAttr = function() {
range.setAttribute('value', range.value);
counter.innerHTML = "<p>"+range.value+"</p>";
counter.style.left = ((range.value * paso) -8) + "px";
};
window.addEventListener('load',modifyValueAttr, false);
range.addEventListener('input',modifyValueAttr, false);