Namierzanie elementów id JavaScript

Question

Mam problem z namierzeniem elementu id="1" który jest w divie o id="przyciski". Wie ktoś może jak namierzyć element o id 1 w divie o id przyciski i ważne jest aby namierzanie nie było na cały dokument tylko w tym divie przyciski. Bo gdy daje 

document.getElementById("przyciski").getElementById("1");

to wyskakuje błąd z selektorem $() to samo a jak pisze

 document.querySelector("#" + zmn);

to nie działa (zmn to zmienna która przechowuje liczbe 1, ta zmienna jest potrzeba).

Wie ktoś jak namierzyć element w elemencie?

Comments

to wyskakuje błąd z selektorem

...jaki?

to nie działa

...a co robi?

Come on :/

 

---

Taki błąd przy składni 

document.querySelector("#przyciski").getElementById(zmn)

błąd:

document.querySelector(...).getElementById is not a function

A przy takiej składni: 

document.querySelector("#przyciski").querySelector("#" + zmn);

i takiej:

document.querySelector("#" + zmn);

Taki błąd:

Failed to execute 'querySelector' on 'Element': '#1' is not a valid selector.

Ale chciałbym zaznaczyć ze jeżeli chodzi o id z napisem np."napis" nie ma problemu normalnie dziala problem się pojawia dopiero gdy np.id="1"

---

@Marak123, @Comandeer - na tym forum podał według Mnie super sposób na (pseudo)numerowane elementy html (div, button itp.). Moja luźna propozycja w oparciu o ten kod. (przepraszam nie podam, w którym wątku (pytaniu), gdzieś umknęło)

<!-- test.html -->
<style>
    #przyciski {
        width: 300px;
        height: 350px;
        font-size: 26px;
    }
    #przyciski div {
        border: 1px solid black;
        width: 100px;
        height: 30px;
        margin: 5px;
        padding-top: 5px;
        text-align: center;
        cursor: pointer;        
        font-weight: bold;
        color: black;
    }
    #przyciski div:active {
        transform: translateY(2px);
    }
    #przyciski span {
        display: block;
        margin: 5px;
        margin-top: 20px;
        font-variant: small-caps;
        font-size: 1.8rem;
        color: #e6d4d4;
    }
</style>

<div id="przyciski">
    <div id="p1">1</div>
    <div id="p2">2</div>
    <div id="p3">3</div>
    <div id="p4">4</div>
    <span id="message">Click:</span>
</div>

<script>
    window.onload = function() {
        const div = document.querySelectorAll('[id^="p"]');

        div.forEach((div) => {
            div.addEventListener('click', ( {target} ) => {
                const msg = document.getElementById('message');
                const id = Number( target.id.replace( 'p', '' ) );
                msg.innerHTML = "Click: id=" + target.id + " nr=" +id;
            });
        });
    }
</script>

 

Answer 1

document.querySelector(...).getElementById is not a function

Brzmi jakby `document.querySelector("#przyciski")` zwracało nulla, więc nie ma elementu #przyciski.

Ale chciałbym zaznaczyć ze jeżeli chodzi o id z napisem np."napis" nie ma problemu normalnie dziala problem się pojawia dopiero gdy np.id="1"

Ogólnie id numeryczny nie jest dobrym pomysłem. We wcześniejszych wersjach HTMLa w ogóle nie był wspierany. Teraz jest, ale musisz trochę inaczej użyć querySelector: https://stackoverflow.com/a/20306237/2468469

Comments

na pewno jest takie id jak przyciski bo używam takiego już i normalnie działa

---

Metoda getElementById jest dostępna tylko w obiekcie document, a nie w kontekście dowolnego elementu DOM - tak jak jest w przypadku metody element.querySelector.

Answer 2

Id elementu powinno być unikalne, więc samo document.querySelector( '#1' ) powinno być w pełni wystarczające. Jeśli masz więcej niż jeden element o takim [id], to znaczy, że masz niepoprawny kod HTML.

Co do problemu: możliwe, że wywołujesz kod JS zanim element zostanie wczytany.

Comments

więc samo document.querySelector( '#1' ) powinno być w pełni wystarczające

Jak to się ma do tego? https://stackoverflow.com/a/20306237/2468469

---

@Comandeer, Kod js wywołuje się po wczytaniu tego elementu bo jest na samym dole znacznika body a nie ma 2 taki samych znaczników id

---

Dzięki wszystkim za pomoc rozwiązałem ten problem tak że zrobiłem po prostu funkcje która zamienia cyfry na napis po to bo zmieniłem id z cyfry na cyfrę słownie

---

@adrian17, faktycznie, powinno być escape'owane:

document.querySelector( CSS.escape( '#1' ) )