Zmienna js jako nazwa klikniętej wartości z menu rozwijalnego

0

Dzień dobry,
Uczę się tworzyć swoją pierwszą stronę internetową. Robię to głównie przez edytowanie przykładów z internetu. Potrzebuję trochę rozszerzyć funkcjonalność a nie mogę sobie z tym poradzić.
W kodzie html mam menu z którego chciałbym wybrać ostatecznie (Element1_1, Element1_2, Element2_1 lub Element2_2). Chciałbym żeby kliknięcie danego parametru spowodowało zapisało nazwę jako zmienną, którą użyję w kodzie js.
kod html:

<!doctype html>
<html>

  <head>
    <title>Tablice stalowe</title>
    <meta charset="utf-8" />
	<link rel="stylesheet" href="css/styl.css" />
  </head>

  <body>
<ul id="mainmenu">
	
	<li><a href="#">Wybierz grupę <i class="arrow"></i></a>
		<ul>
			<li><a href="#">Grupa1</a>
				<ul>
					<li><a href="#">Element1_1</a></li>
					<li><a href="#">Element1_2</a></li>
					
				</ul>
			</li>
			<li><a href="#">Grupa2</a>
				<ul>
					<li><a href="#">Element2_1</a></li>
					<li><a href="#">Element2_2</a></li>
					
				</ul>
			</li>
		</ul>
	</li>
	
</ul>
	<script src="js/lista.js"></script>
</body>
  
  
</html>

kod js:

var wybranyelement;
var w1,w2,w3,w4
var Element1_1,Element1_2,Element2_1,Element2_2;

Element1_1=[1,2,3,4]
Element1_2=[5,6,7,8]
Element2_1=[9,10,11,12]
Element2_2=[13,14,15,16]
//m=wybranawartosc[0];



document.write('<h3>' + 'Wartość jest równa:' + Element1_1[0] +'</h3>');

Jak widać chciałbym w ostatniej linijce zamiast z ręki Element1_1 mieć zmienną którą wybiorę z listy.
Czytałem o onclick() ale nie wiem jak to zastosować u siebie. Może dla kogoś jest to temat banalnie prosty i odblokuje mi dalszą ścieżkę.
Pozdrawiam

0

Po pierwsze sensowniej jest w Twoim przypadku użyć elementu button zamiast a jako, że nie nie linkujesz do żadnych podstron.
Widzę 2 rozwiązania tak na szybko dla Ciebie.

  1. Stwórz dedykowane metody obsługi zdarzeń dla każdego przycisku (Element1_1_clicked, Element1_2_clicked itd.) i w tych metodach wykonuj co tam potrzebujesz, np.
<button onclick='Element1_1_clicked'>Element1_1</button>
...
function Element1_1_clicked() {
    document.write('' + 'Wartość jest równa:' + Element1_1[0] + '');
}
  1. Stwórz jedną metodę do obsługi kliknięć i przekazuj jej parametr mówiący z której tablicy odczytać wartość
<li><button onclick='clicked(0)'>Element1_1</button></li>
<li><button onclick='clicked(1)'>Element1_2</button></li>
...
var t = [Element1_1, Element1_2, Element2_1, Element2_2];
function clicked (idx) {
    document.write('' + 'Wartość jest równa:' + t[idx][0] + '');
}
0

Dziękuję za odpowiedź ale zapomniałem dodać, że lista będzie miała 10 grup a w grupie będzie po 100 elementów, więc Twoje rozwiązanie będzie zajmowało sporo miejsca. Myślałem, że jest jakiś łatwiejszy sposób.

2

W gołym js

var elements = document.getElementsByTagName("a");
for (let element of elements)
    element.addEventListener("click", e => { console.log(e.target.innerText); e.preventDefault(); }); // musisz tutaj jeszcze sprawdzić, czy to na pewno Twoje "a", czy też któreś nadrzędne "a"

Z jQuery

$("#mainmenu li li li a").click(e => { console.log(e.target.innerText); e.preventDefault(); });

Napisane z palca i nie testowane, chodzi o pokazanie pomysłu. Wynik działania skryptów zobaczysz w konsoli przeglądarki.

0

Albo tak:

<!doctype html>
<html>

  <head>
    <title>Tablice stalowe</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/styl.css" />
  </head>
  <body>
<ul id="mainmenu">

    <li><a href="#">Wybierz grupę <i class="arrow"></i></a>
        <ul>
            <li><a href="#">Grupa1</a>
                <ul>
                    <li><a href="#" class="element_klikalny">Element1_1</a></li>
                    <li><a href="#" class="element_klikalny">Element1_2</a></li>

                </ul>
            </li>
            <li><a href="#">Grupa2</a>
                <ul>
                    <li><a href="#" class="element_klikalny">Element2_1</a></li>
                    <li><a href="#" class="element_klikalny">Element2_2</a></li>

                </ul>
            </li>
        </ul>
    </li>

</ul>

<script>
  /* --- zmienne --- */
  elementy = [];
  elementy["Element1_1"] = [1,2,3,4];
  elementy["Element1_2"] = [5,6,7,8];
  elementy["Element2_1"] = [9,10,11,12];
  elementy["Element2_2"] = [13,14,15,16];
  /* --- /zmienne --- */

  
  /* --- funkcje --- */
  function element_clicked(x) {
    document.write('' + 'Wartość jest równa:' + x + '');
  }
  /* --- /funkcje --- */
  

  /* --- inicjacja --- */
  var tab__elementy = document.querySelectorAll(".element_klikalny");
  for (nr=0; nr<tab__elementy.length; nr++) {
    tab__elementy[nr].addEventListener('click', function(e) {
      element_clicked(elementy[e.target.innerHTML]);
    }, false);    
  }
  /* --- inicjacja --- */  
</script>
</body>

</html>
2
Freja Draco napisał(a):

Albo tak:

  var tab__elementy = document.querySelectorAll(".element_klikalny");
  for (nr=0; nr<tab__elementy.length; nr++) {
    element = tab__elementy[nr];
    element.addEventListener("click", function() {element_clicked(element.innerHTML)});
  }

Serio? W momencie wywołania handlera zmienna element będzie miała wartość ostatniego elementu z tablicy.
Ponadto po co w handlerze wołasz kolejny handler?
Stosuj angielskie nazewnictwo. Stosuj notację camelCase, jest standardem w js.
Deklaruj zmienne.
document.write => console.log
'' + 'Wartość jest równa:' - o co chodzi z tym doklejaniem pustego stringa? Toż to nie PHP.

0

Rzeczywiście kod Freja gdzieś przenosi i powoduję wywołanie całej tablicy ale ostatniej.
Ja bym chciał zeby on podał mi pierwszą wartość tablicy o nazwie wskazanej kliknięciem. Żeby nie ładował przy tym nowej strony tylko zmieniał sie dynamicznie.

ŁF wpisałem taki kod do js

var elements = document.getElementsByTagName("a");
for (let element of elements)
    element.addEventListener("click", e => { console.log(e.target.innerText); e.preventDefault(); });




document.write('<h3>' + 'Wartość jest równa:' + elements +'</h3>');

screenshot-20200513125236.png

Chiałem coś wyciągnąć z tej kolekcji próbując różnych kombinacji typu e[0], element[0], elements[0] i nic nie działa. Widzę, że jednak to zagadnienie nie jest na moje umiejętności. Będę musiał nauczyć się więcej podstaw. Dziękuję za odpowiedzi.

0
ŁF napisał(a):

Serio? W momencie wywołania handlera zmienna element będzie miała wartość ostatniego elementu z tablicy.

No racja. Poprawiłam.

Stosuj angielskie nazewnictwo.

Nie zamierzam się anglicyzować.

Stosuj notację camelCase, jest standardem w js.

Nie lubię.

0

Pomysł ŁF widać, że działa w tle. Nie jestem zaawansowany więc nie za bardzo rozumiem console.log bez przykładu. Nie chciałbym denerwować moim poziomem innych użytkowników ale czuję, że jesteście blisko rozwiązania mojego problemu.

0

Co to znaczy, że działa w tle? Że wypisuje do konsoli?
Teraz zamiast console.log użyj swojej funkcji albo wywołaj w handlerze alert(e.target.innerText) albo alert(window[e.target.innerText]), będzie "nie w tle". Gwoli wyjaśnienia: window to obiekt, do którego trafiają wszystkie globalne zmienne, zatem var a = 1; console.log(window.a) wypisze "1" na konsoli.
Acz te deklaracje Element1_1=[1,2,3,4] itp są dziwnym rozwiązaniem architektonicznym, a co za tym idzie pachnie to złym podejściem do problemu. Po co Ci indeks elementu w menu? Da się to łatwo zrobić nie tworząc tych tablic, np. wraz z przypisaniem handlera kliknięcia ustaw elementowi indeks w jakimś atrybucie data-*, np. tą pętlę, którą podałem, zmień na zwykły for for (var i = 0; i < elements.length; ++i), a wartość zapamiętaj w elemencie poprzez element.dataset["index"] = i. W handlerze będziesz miał dostęp do tego atrybutu.

Żeby nie być gołosłownym (przy okazji zrobiłem Twój html nieco bardziej koszernym)

<style>
	#mainmenu span { text-decoration: underline; color: blue; cursor: pointer; }
</style>

<ul id="mainmenu">
    <li><span>Wybierz grupę <i class="arrow"></i></span>
        <ul>
            <li><span>Grupa1</span>
                <ul>
                    <li><span>Element1_1</span></li>
                    <li><span>Element1_2</span></li>

                </ul>
            </li>
            <li><span>Grupa2</span>
                <ul>
                    <li><span>Element2_1</span></li>
                    <li><span>Element2_2</span></li>

                </ul>
            </li>
        </ul>
    </li>
</ul>

<script>
	window.addEventListener("load", () => {
		let elements = document.querySelectorAll("#mainmenu li li li span");
		for (let i = 0; i < elements.length; ++i)
		{
			element = elements[i];
			element.dataset["index"] = i;    
			element.addEventListener("click", e => { 
				alert("Hi, I'm " + e.target.innerText + " and I'm a " + e.target.dataset["index"]);
				e.preventDefault();
			});
		}
	});
</script>
0
ŁF napisał(a):

Co to znaczy, że działa w tle? Że wypisuje do konsoli?
Teraz zamiast console.log użyj swojej funkcji albo wywołaj w handlerze alert(e.target.innerText) albo alert(window[e.target.innerText]), będzie "nie w tle". Gwoli wyjaśnienia: window to obiekt, do którego trafiają wszystkie globalne zmienne, zatem var a = 1; console.log(window.a) wypisze "1" na konsoli.
Acz te deklaracje Element1_1=[1,2,3,4] itp są dziwnym rozwiązaniem architektonicznym, a co za tym idzie pachnie to złym podejściem do problemu. Po co Ci indeks elementu w menu? Da się to łatwo zrobić nie tworząc tych tablic, np. wraz z przypisaniem handlera kliknięcia ustaw elementowi indeks w jakimś atrybucie data-*, np. tą pętlę, którą podałem, zmień na zwykły for for (var i = 0; i < elements.length; ++i), a wartość zapamiętaj w elemencie poprzez element.dataset["index"] = i. W handlerze będziesz miał dostęp do tego atrybutu.

Żeby nie być gołosłownym (przy okazji zrobiłem Twój html nieco bardziej koszernym)

<style>
	#mainmenu span { text-decoration: underline; color: blue; cursor: pointer; }
</style>

<ul id="mainmenu">
    <li><span>Wybierz grupę <i class="arrow"></i></span>
        <ul>
            <li><span>Grupa1</span>
                <ul>
                    <li><span>Element1_1</span></li>
                    <li><span>Element1_2</span></li>

                </ul>
            </li>
            <li><span>Grupa2</span>
                <ul>
                    <li><span>Element2_1</span></li>
                    <li><span>Element2_2</span></li>

                </ul>
            </li>
        </ul>
    </li>
</ul>

<script>
	window.addEventListener("load", () => {
		let elements = document.querySelectorAll("#mainmenu li li li span");
		for (let i = 0; i < elements.length; ++i)
		{
			element = elements[i];
			element.dataset["index"] = i;    
			element.addEventListener("click", e => { 
				alert("Hi, I'm " + e.target.innerText + " and I'm a " + e.target.dataset["index"]);
				e.preventDefault();
			});
		}
	});
</script>

To rozwiązanie jest fajne. Natomiast Element1_1 zawiera tablice z danymi które chcę wyciągnąć na środek ekranu i w zależności od tego co akurat kliknę to mi podmieni te wartości. Myślałem że da się zrobić tak:
var Element1_1;
var kliknietyobiekt;
Element1_1=[1,2,3,4]
Kliknięcie myszką w Element1_1 powoduje przypisanie
kliknietyobiekt=Element1_1; // kliknietyobiekt=e.target.innerText
i teraz
alert(kliknietyobiekt[0]); // spowoduje wyjęcie jedynki

Po to właśnie są te tablice a raczej ich tysiąc. I wolałbym właśnie nie alertem a żeby były widoczne za pomocą document.write z podmienianiem konkretnej wartości z danej tablicy.
Bardzo dziękuję za wszystkie wskazówki i wsparcie.

0
wi3si0 napisał(a):

Element1_1 zawiera tablice z danymi które chcę wyciągnąć na środek ekranu i w zależności od tego co akurat kliknę to mi podmieni te wartości. Myślałem że da się zrobić tak:
var Element1_1;
var kliknietyobiekt;
Element1_1=[1,2,3,4]
Kliknięcie myszką w Element1_1 powoduje przypisanie
kliknietyobiekt=Element1_1; // kliknietyobiekt=e.target.innerText
i teraz
alert(kliknietyobiekt[0]); // spowoduje wyjęcie jedynki

Po to właśnie są te tablice a raczej ich tysiąc. I wolałbym właśnie nie alertem a żeby były widoczne za pomocą document.write z podmienianiem konkretnej wartości z danej tablicy.

Nie bardzo rozumiem, to co opisujesz.

0

Napiszę jeszcze raz:
1.Mam menu rozwijalne z grupami a w nich sa elementy o nazwach Element1_1,Element1_2,...
2.Klikam w jeden z tych elementów np. Element1_1
3.Program ma w pamięci słowo 'Element1_1' i przypisuje nim nową zmienną o nazwie kliknietyelement.
4.Definiuje listy o tych samych nazwach co elementy w grupach np. Element1_1=[1,2,3,4]...
5.Chcialbym zeby program pamietajac slowo kliknietyelement porównał je z nazwami tablic jakie zdefiniowałem w punkcie 4.
6.W wyznaczonym miejscu na ekranie wypisze mi element z listy o nazwie wskazanej kliknięciem. Jak kliknę w inny element z grupy menu, zmieni wartosc na tą z tej tablicy nie odświeżajac strony i nie przenoszac mnie na inną.

0

Nadal słabo to rozumiem, ale może mało rozumna jestem ;)
Dam szansę innym.

0

Jeżeli tych tablic masz tysiąc to sugeruję wygenerować kod html, a nie rozpisywać go ręcznie.

<body>
    <ul>
        <li><a href='#'>Wybierz grupę</a>
            <ul id='groups-list'>
            </ul>
        </li>
    </ul>

    <script>
        // tu albo zdefiniuj jakie masz grupy i elementy w nich, albo wygeneruj taką strukturę:
        const groups = [
            {
                name: 'Grupa1',
                elements: [
                    {
                        name: 'Element_1_1',
                        values: [11, 112, 113, 114]
                    },
                    {
                        name: 'Element_1_2',
                        values: [12, 122, 123, 124]
                    }
                ],
            },
            {
                name: 'Grupa2',
                elements: [
                    {
                        name: 'Element_2_1',
                        values: [21, 212, 213, 214]
                    },
                    {
                        name: 'Element_2_2',
                        values: [22, 222, 223, 224]
                    }]
            },
        ];

        const groupList = document.getElementById('groups-list');
        for (let i = 0; i < groups.length; i++) {
            let group = groups[i];
            let groupNode = document.createElement('li');
            groupNode.innerText = group.name;

            let elementsListNode = document.createElement('ul');
            for (let j = 0; j < group.elements.length; j++) {
                let element = group.elements[j];
                let elementNode = document.createElement('li');
                let linkNode = document.createElement('a');
                linkNode.innerText = element.name;
                linkNode.href = '#';

                linkNode.addEventListener('click', function (event) {
                    // jeżeli kliknięty element ma być rozpoznawany po tekście linka to można go rozpoznać w poniższy sposób, 
                    // alternatywnie można użyć w tym miejscu zmiennej `element` z kontekstu powyżej
                    let targetText = event.target.innerText;
                    let kliknietyelement = groups.flatMap((g) => g.elements).filter((el) => el.name === targetText)[0];
                    document.write(kliknietyelement.values[0]);
                });

                elementNode.appendChild(linkNode);
                elementsListNode.appendChild(elementNode);
            }

            groupNode.appendChild(elementsListNode);
            groupList.appendChild(groupNode);
        }
    </script>

</body>
1

Wszystko masz już podane. Jeśli nie umiesz z tego skorzystać, to znaczy, że masz jeszcze zbyt niskie umiejętności i musisz się podszkolić z js i html. Jeśli zaś liczysz na to, że ktoś napisze dokładnie to, co potrzebujesz, to pomyliłeś forum. Mam nadzieję, że to pierwsze i zapraszam do znalezienia i obejrzenia/przeczytania paru tutoriali z js.

0

Tak zdecydowanie jestem zadowolony z Waszej pomocy, za którą bardzo dziękuję. Myślę, że z tych informacji wyciągnę coś dla siebie. Jeżeli macie jakieś pytania z tematyki budownictwa to chętnie pomogę na prv. Pozdrawiam serdecznie

1 użytkowników online, w tym zalogowanych: 0, gości: 1