Forum Mjukvara Programmering och digitalt skapande Tråd

[JavaScript] Byta class på en div vid klick

1
Skriv svar
Permalänk
Medlem ★
●

[JavaScript] Byta class på en div vid klick

Jag kan ingenting angående JavaScript så jag söker efter hjälp här för jag har ingen aning om vad jag ska söka på google för att få svar

Exempel

Jag har en div som är 100x50px, grå
När jag klickar på denna vill jag att den ska bli 25x50px, ljusblå

Och när jag klickar på den igen vill jag att den återgår till 100x50px, grå

Vill att det ska fungera ihop med denna kod

JavaScript

<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>

meny

<div class="closed" onclick="toggle_visibility('projekt');">Bilder</div>
                        <div id="projekt" class="toggle">
                           <div class="objekt">katter</div>
                           <div class="objekt">hundar</div>
                           <div class="objekt">fåglar</div>
                        </div>

Denna kod gör att menyn öppnas under "bilder", men när jag öppnar den vill jag att class="closed" ska ändras till class="open"

Hoppas ni förstår.

Tack för svar

Rubrik ändrad: &quot;Java&quot; &#8594; &quot;JavaScript&quot;, samt ändrat med markering i texten. Skillnaden är viktig :-)
Redigera
Citera flera Citera
Permalänk
Medlem
●

Java är inte javascript

Visa signatur

AMD Ryzen 5 3600 | Sapphire R9 280

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av utsatt_unge496:

Java är inte javascript

Gå till inlägget

ok.. så mycket visste jag Tack

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Enkel toggle-funktion: http://jsfiddle.net/1c365rpx/

Visa signatur

Spela Swemantle! Du vet att du vill.

Ibland har jag fel, men då är det någon annans fel.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av LemonIllusion:

Enkel toggle-funktion: http://jsfiddle.net/1c365rpx/

Gå till inlägget

Tusen tack!

Redigera
Citera flera Citera
Permalänk
Avstängd
●

Eller använd Angular eller Knockout

http://jsfiddle.net/n5nm7o3z/

Visa signatur

Min blogg

Redigera
Citera flera Citera
Permalänk
Datavetare ★
●
Skrivet av CyberVillain:

Eller använd Angular eller Knockout

http://jsfiddle.net/n5nm7o3z/

Gå till inlägget

Knockout verkar ju trevligt!

Om jag vill göra detta (3st knappar, klick på #1 byter togglar #1, klick på #2 togglar #3 och motsvarande för klick på #3) med Knockout hur går man tillväga? Är i stort sett helt grön på web-frontend programmering så är säkert superenkelt bara man har lite mer koll på JS/KO.

Visa signatur

Care About Your Craft: Why spend your life developing software unless you care about doing it well? - The Pragmatic Programmer

Redigera
Citera flera Citera
Permalänk
Avstängd
●

Typ såhär

http://jsfiddle.net/bxgkt73p/

Just detta exempel skapar ju mer kod i knockout. Men även med vanilla javascript ska man undvika att blanda DOM och beteende (domänlogik) och just detta exempel blir ju enklare om man skiter i den regeln.

edit: templates kanske var overkill här, en vanlig foreach binding funkar http://jsfiddle.net/bxgkt73p/1/

Senast redigerat
Visa signatur

Min blogg

Redigera
Citera flera Citera
Permalänk
Hedersmedlem ★
●
Skrivet av Yoshman:

Knockout verkar ju trevligt!

Om jag vill göra detta (3st knappar, klick på #1 byter togglar #1, klick på #2 togglar #3 och motsvarande för klick på #3) med Knockout hur går man tillväga? Är i stort sett helt grön på web-frontend programmering så är säkert superenkelt bara man har lite mer koll på JS/KO.

Gå till inlägget

Vanilla-variant som undviker att knö in "onClick" i HTML-markup så att man kan separera uppmärkning och funktion:

<!doctype html>
<meta charset="utf-8">
<title>Test</title>

<style>
div {
  width: 50px;
  height: 50px;
  background-color: red;
}

.on { background-color: green;}
</style>

<div id="btn0"></div>
<div id="btn1"></div>
<div id="btn2"></div>

<script>
var button0 = document.getElementById('btn0'),
    button1 = document.getElementById('btn1'),
    button2 = document.getElementById('btn2');

var buttonToggle = function createButtonToggle(target) {
  return function returnButtonToggle() {
    target.classList.toggle('on');
  }
};

button0.addEventListener('click', buttonToggle(button0));
button1.addEventListener('click', buttonToggle(button2));
button2.addEventListener('click', buttonToggle(button1));
</script>
Visa signatur

Nu med kortare användarnamn, men fortfarande bedövande långa inlägg.

Redigera
Citera flera Citera
Permalänk
Avstängd
●

Inge fel med att ha bindingskod i HTML, det är andra hållet som är dumt. (Jag menar alltså data-bind och Anuglar dito, onclick attribut ska man undvika)

Visa signatur

Min blogg

Redigera
Citera flera Citera
Permalänk
Datavetare ★
●
Skrivet av phz:

Vanilla-variant som undviker att knö in "onClick" i HTML-markup så att man kan separara uppmärkning och funktion:

<!doctype html>
<meta charset="utf-8">
<title>Test</title>

<style>
div {
  width: 50px;
  height: 50px;
  background-color: red;
}

.on { background-color: green;}
</style>

<div id="btn0"></div>
<div id="btn1"></div>
<div id="btn2"></div>

<script>
var button0 = document.getElementById('btn0'),
    button1 = document.getElementById('btn1'),
    button2 = document.getElementById('btn2');

var buttonToggle = function createButtonToggle(target) {
  return function returnButtonToggle() {
    target.classList.toggle('on');
  }
};

button0.addEventListener('click', buttonToggle(button0));
button1.addEventListener('click', buttonToggle(button2));
button2.addEventListener('click', buttonToggle(button1));
</script>
Dold text
Gå till inlägget

Även om detta är mer kod är det en definitivt en förbättring av min version just p.g.a. separationen!

Visa signatur

Care About Your Craft: Why spend your life developing software unless you care about doing it well? - The Pragmatic Programmer

Redigera
Citera flera Citera
Permalänk
Avstängd
●
Skrivet av Yoshman:

Även om detta är mer kod är det en definitivt en förbättring av min version just p.g.a. separationen!

Gå till inlägget

Den har en direkt koppling till DOMen, detta bör man helst undvika, tex genom KO eller Angular

edit: bla för testabilbity

http://jsfiddle.net/bxgkt73p/3/

Visa signatur

Min blogg

Redigera
Citera flera Citera
Permalänk
Datavetare ★
●
Skrivet av CyberVillain:

Den har en direkt koppling till DOMen, detta bör man helst undvika, tex genom KO eller Angular

edit: bla för testabilbity

http://jsfiddle.net/bxgkt73p/3/

Gå till inlägget

Det säger jag absolut inte emot, förstår MVVC så inser varför man vill ha det för den här typen av applikation. Som jag skrev innan, har väldigt lite erfarenhet av front-end programmering, är först när man jobbat med saker man inser var problemen ligger.

Tror också starkt på att vissa gropar måste man som utvecklare få kliva i, det går helt enkelt inte att fullt ut förklara varför vissa saker är en dålig idé, man måste få uppleva det själv Kan mycket väl tänka mig att vad som ska ligga i DOM och inte är en sådan grop (eller kanske helt fält där det finns massor med gropar).

Edit: sedan kan jag förstå varför man INTE använder ramverk som KO i enklare saker. Den version som phz förstod jag direkt medan det tog en stund att bena ut varför/hur din version fungerar (men har aldrig använt KO tidigare och är rätt grön på HTML/JS/CSS). Här krävs tidigare erfarenhet kring problem med testbarhet, vilka problem man får när lösningen skalas upp och liknade för att förstå varför något som KO/Angular (som efter lite Googlande verkar vara ett ramverk för "single page application") har ett stort mervärde.

Och är målet att lära sig webbprogrammering rent generellt är det ett mervärde i att INTE använda ramverk. En väldigt ofta förekommande orsak till buggar som är svåra att hitta är att allt för många håller på med Programming by Coincidence (t.ex använder kraftfulla ramverk man inte riktigt begriper sig på). Grunderna måste vara glasklara innan man drar in vassare verktyg!

Senast redigerat
Visa signatur

Care About Your Craft: Why spend your life developing software unless you care about doing it well? - The Pragmatic Programmer

Redigera
Citera flera Citera
Permalänk
Avstängd
●

Objektorienterad javascript kan verka krångligt

Visa signatur

Min blogg

Redigera
Citera flera Citera
Permalänk
Avstängd
●

Ops i test demot så råkade jag ha kvar ko.applyBindings(new ParentViewModel()); rätt dumt att både starta applikationen och köra tester mot logiken samtidigt

http://jsfiddle.net/bxgkt73p/4/

Visa signatur

Min blogg

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara