Gör hel div-tag klickbar och få värde från child div
Hej, jag har följande kod i HTML.
<div class="contact-entry" onclick="getName()">
<div class="contact-name" >
<div id="name-initial">P</div>
<div id="full-name">Person Personson</div>
</div>
<div id="last-message">
<p>meddelande 1</p>
</div>
</div>
<div class="contact-entry" onclick="getName()">
<div class="contact-name">
<div id="name-initial">H</div>
<div id="full-name">Human Humanson</div>
</div>
<div id="last-message">
<p>meddelande 2</p>
</div>
</div>
</div>
Och i JS har jag:
function getName(){
var name = document.getElementById("full-name").innerHTML;
console.log(name)
}Jag vill kunna klicka på contact-entry div-taggen som har en fix storlek och från den vill jag fånga upp full-name. Med det jag har nu får jag bara ut Person Personson och inte Human Humanson när jag klickar på den. Tanken är sen att från JS-funktionen getName skicka över det till Flask.
Detta är ju hårdkodade värden och dessa kommer sen at fyllas m.h.a det jag tror kallas jinja2 med data från databasen.
Tack på förhand!
Om jag inte missminner mig så returnerar getElementById bara ett element. Du har samma id på två div-taggar och då får du bara en av dem. Lägg till ett name-tag och använd getElementsByName så kan det nog funka
Tack för svar! :)
Vet inte om jag förstod dig rätt men nu har jag ändrat och lagt till name="reciever-name" på båda.
HTML-koden nedan:
<div class="contact-entry" onclick="getName()">
<div class="contact-name" >
<div id="name-initial">P</div>
<div id="full-name" name="reciever-name">Person Personson</div>
</div>
<div id="last-message">
<p>meddelande 1</p>
</div>
</div>
<div class="contact-entry" onclick="getName()">
<div class="contact-name">
<div id="name-initial">H</div>
<div id="full-name" name="reciever-name">Human Humanson</div>
</div>
<div id="last-message">
<p>meddelande 2</p>
</div>
</div>
Och JS-funktionen är nu:
function getName(){
var name = document.getElementsByName("reciever-name").values;
console.log(name)
}Nu får jag dock följande i consolen: f values { [native code] }, jag har även testat med name.toString() men det hjälper inte. Jag fattar det som att det här kan hända om man skriver t.ex onclick="getName" för att jag då får en referens till funktionen istället för att jag kallar på funktionen, men jag har ju paranteser så det borde inte gälla mig.
Anledning till att båda kontakterna har samma name är för att jag har tänkt att ladda in dom från en databas så slutprodukten ska vara någon i stil med (ska fixa en view i sql där alla kontakter står ihop med senast skickade meddelandet så det ska ersätta "meddelande 1" i paragrafen):
{% for c in contacts %}
<div class="contact-entry" onclick="getName()">
<div class="contact-name" >
<div id="name-initial">{{ c[0].capitalize() }}</div>
<div id="full-name">{{ c }}</div>
</div>
<div id="last-message">
<p>meddelande 1</p>
</div>
</div>
{% endfor %}
Det är nog en bra tanke men ditt problem är att du får tillbaks en vektor med div'ar i ditt anrop till getElementsByName och du vet inte vilken som användaren klickat på. Jag föreslår att du, när du skapar din kod i JSP-sidan, lägger in onclick=getName(index) där du ökar på index för varje namn som du skapar så kan du i metoden getName plocka upp innehållet med
var name = document.getElementsByName("receiver-name")[index]
console.log(name.textContent)Alternativt kan du redan i onclick-deklarationen skicka med namnet vilket är enklare
eller
Skapa ett nytt id för varje div (med nån räknare) och skicka med det id till getName
Exempel
Visa spoiler
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function getName(name){
console.log(name)
}
</script>
</head>
<body>
<div class="contact-entry" onclick="getName('Person Personson')">
<div class="contact-name" >
<div id="name-initial">P</div>
<div id="full-name-1" name="reciever-name">Person Personson</div>
</div>
<div id="last-message">
<p>meddelande 1</p>
</div>
</div>
<div class="contact-entry" onclick="getName('Human Humanson')">
<div class="contact-name">
<div id="name-initial">H</div>
<div id="full-name-2" name="reciever-name">Human Humanson</div>
</div>
<div id="last-message">
<p>meddelande 2</p>
</div>
</div>
</div>
</body>
</html>
Visa spoiler
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function getName(id){
console.log(document.getElementById(id).textContent)
}
</script>
</head>
<body>
<div class="contact-entry" onclick="getName('full-name-1')">
<div class="contact-name" >
<div id="name-initial">P</div>
<div id="full-name-1" name="reciever-name">Person Personson</div>
</div>
<div id="last-message">
<p>meddelande 1</p>
</div>
</div>
<div class="contact-entry" onclick="getName('full-name-2')">
<div class="contact-name">
<div id="name-initial">H</div>
<div id="full-name-2" name="reciever-name">Human Humanson</div>
</div>
<div id="last-message">
<p>meddelande 2</p>
</div>
</div>
</div>
</body>
</html>
Hoppas det hjälper dig
Ändra också så att du har unika id på alla div-taggarna enligt exemplen. Det är inte förbjudet med samma id men det är bra kodstandard att ha unika. Dessutom är de värdelösa om du har samma på fler ställen som du nu har egen erfarenhet av :)
Visa spoiler
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function getName(name){
console.log(name)
}
</script>
</head>
<body>
<div class="contact-entry" onclick="getName('Person Personson')">
<div class="contact-name" >
<div id="name-initial-1">P</div>
<div id="full-name-1" name="reciever-name">Person Personson</div>
</div>
<div id="last-message-1">
<p>meddelande 1</p>
</div>
</div>
<div class="contact-entry" onclick="getName('Human Humanson')">
<div class="contact-name">
<div id="name-initial-2">H</div>
<div id="full-name-2" name="reciever-name">Human Humanson</div>
</div>
<div id="last-message-2">
<p>meddelande 2</p>
</div>
</div>
</div>
</body>
</html>
Tack så jättemycket för hjälpen, nu är det löst!! :D
Jag körde på alternativet med att skapa ett nytt id med hjälp av en räknare och skickade med det till getName. Tack även för tipset med unika id-n, anlendingen till att jag hade samma var för att jag hade pyntat dom i css-filen med #last-message men bytte det till class="last-message".
Lösningen ser ut såhär:
<div class="contacts">
{% for c in contacts %}
<div class="contact-entry" onclick="getName('full-name-{{loop.index}}')">
<div class="contact-name" >
<div id="name-initial">{{ c[0].capitalize() }}</div>
<div class="full-name" id="full-name-{{loop.index}}">{{ c }}</div>
</div>
<div class="last-message" id="last-message-{{loop.index}}">
<p>meddelande {{ loop.index }}</p>
</div>
</div>
{% endfor %}
</div>