liczenie znakow w input type text

Question

Mam 5 inputow fieldow

  <td id="inputsParent">
            <input id="1" maxlength="15" onkeyup="count(this,15)" type="text"/>
            <input id="2" maxlength="15" onkeyup="count(this,15)" type="text"/>
            <input id="3" maxlength="15" onkeyup="count(this,15)" type="text"/>
            <input id="4" maxlength="15" onkeyup="count(this,15)" type="text"/>
            <input id="5" maxlength="15" onkeyup="count(this,15)" type="text"/>
        </td>
        
        <td id="spans">
            <span id="s1">15</span>
            <span id="s2">15</span>
            <span id="s3">15</span>
            <span id="s4">15</span>
            <span id="s5">15</span>
        </td>
        oraz w drugiej kolumnie spany z liczbami (musza byc po prawej stronie) napisalem funckje kotra liczy ilosc elementow i w tym spanie podmienia na tyle ile jeszcze moge wpisac problem polega na tym iz jak wpisuje w jednym zmienia sie we wszystkich pieciu a nie tym konkretnym jak byc powinno

const spanId = ["s1","s2","s3","s4","s5"]

function count(field,max)
{
    field.value = field.value.substr(0,max);
    spanId.forEach(id => {
    var x = document.getElementById(id).innerHTML = max - field.value.length;
});
}

czyt ktos moglby mnie oswiecic co zrobilem zle?

Comments

Źle umieściłeś kod w swoim poście 

Answer 1

Zmienia się we wszystkich pięciu ponieważ używasz forEach (zmienia wartość każdego elementu z id zapisanym w tablicy). Zamiast zmieniać wartości wszystkich zmień tylko tego konkretnego.

Comments

czyli zwykly for czy mozna zrobic to jakos w forEach?

---

Nie potrzebujesz ani for ani forEach. Pętla wykonuje jakieś instrukcje x razy a Ty chcesz zmienić tylko jeden element, nie trzeba niczego powtarzać. Możesz pobrać id elementu w którym nastąpiła zmiana poprzez field.id. Do takiego id (weźmy np. 1) dopisujesz na początku 's' i wychodzi ci id elementu w którym masz zmienić tekst (w tym przypadku s1).

A więc:

1. Wywal tablice i to forEach (są zbędne), zostaw tą linijkę:

field.value = field.value.substr(0,max);

oraz tą:

var x = document.getElementById(id).innerHTML = max - field.value.length;

2. W drugiej z powyższych linijek zmień id na "s"+field.id

 

---

dzieki wielkie za pomoc