JavaScript Button Text ändern nach Klick geht net

[Sarius87]

hallo, habe dieses fiddle : http://jsfiddle.net/V4u5X/2/

in eine neue Datei eingefügt und verstehe einfach nicht wieso ich nur "See More" sehe und beim fiddle sich der text ändert ... was mache ich falsch bitte ?? hier der Inhalt der .html :

<button class="SeeMore2">See More</button>

<script>
	$('.SeeMore2').click(function(){
		var $this = $(this);
		$this.toggleClass('SeeMore2');
		if($this.hasClass('SeeMore2')){
			$this.text('See More');			
		} else {
			$this.text('See Less');
		}
	});
</script>

 

[Bagbag]

Dir fehlt jQuery (Zeile 4). So wäre es richtig (und meiner Meinung nach schöner gelöst, ansonsten sollte auch dein Code laufen, wenn du jQuery hinzufügst):

<button id="toggleButton">See More</button>


<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>
	var state = false;
	var button = $('#toggleButton');
	
	button.click(function () {
		state = !state;
		
		if (state == true) {
			button.text('See Less');
		} else {
			button.text('See More');
		}
	});
</script>

 

[fhtagn]

Für die Zukunft, F12 zeigt dir Fehlermeldungen in der Konsole und im Quelltext an.

Uncaught ReferenceError: $ is not defined

Außerdem kannst du Breakpoints zum Debuggen setzen und dir Variableninhalte anschauen.

 

[kling1]

gibt kaum ein grund heutzutage noch jquery zu nutzen..
kannst einfach js nutzen
zum beispiel so

document.querySelector('#toggleButton').addEventListener('click', e => {
  e.target.textContent = e.target.textContent == 'See More' ? 'See Less' : 'See More'
})

hier das ganze auf codepen https://codepen.io/anon/pen/KvbOVJ

 

[cppnap]

gibt kaum ein grund heutzutage noch jquery zu nutzen..
kannst einfach js nutzen

Was? warum sollte man kein jQuery mehr benutzen? der Code von Bagbag ist wesentlich übersichtlicher und leichter zu verstehen

 

[kling1]

Was? warum sollte man kein jQuery mehr benutzen? der Code von Bagbag ist wesentlich übersichtlicher und leichter zu verstehen

naja wenn du schwierigkeiten beim evrstehen des codes hats.. liegt es doch eher an deinem skill level..

der jquery code von Bagbag läßt sich auch etwas vereinfachen

let state = false

$('#toggleButton').on('click', function () {
  state = !state

  if (state) {
    $(this).text('See Leass')
  } else {
    $(this).text('See More')
  }

})

ist halt aber ungeil und gegen die prinzipien von SOLID wenn man eine große bibliothek einbindet die genau das gleiche macht was man mit vanilla javascript macht nur mit einer anderen api..

man könnte das togglen an sich antürlich in eine eigene funktion auslagern und das state noch verwenden

let state = false

const toggleText = button => {
  state = !state
  button.textContent = state ? 'See Less' : 'See More'
}

document.querySelector('#toggleButton')
.addEventListener('click', e => toggleText(e.target))

 

[cppnap]

naja wenn du schwierigkeiten beim evrstehen des codes hats.. liegt es doch eher an deinem skill level..

hab ich irgendwo geschrieben, dass ich damit Schwierigkeiten habe?


Tatsache ist, dass er einfach nur einfachen Knopf bearbeiten will. Es ergibt keinerlei Sinn das unnötig und sinnlos kompliziert zu machen und auf jQuery zu verzichten.

wenn man eine große bibliothek einbindet

Ja so eine jquery.min.js mit 90kb ist schon eine echt große Bibliothek

 

[kling1]

naja wenn du schwierigkeiten beim evrstehen des codes hats.. liegt es doch eher an deinem skill level..

hab ich irgendwo geschrieben, dass ich damit Schwierigkeiten habe?


Tatsache ist, dass er einfach nur einfachen Knopf bearbeiten will. Es ergibt keinerlei Sinn das unnötig und sinnlos kompliziert zu machen und auf jQuery zu verzichten.



Ja so eine jquery.min.js mit 90kb ist schon eine echt große Bibliothek

man macht es och komplizierter in dem jquery verwendet..
90kb sind im web sehr viel.. eine minimierte vue.js ist zum beispiel nur 20kb groß und bietet tatsächlich einen mehrwert.. 90kb nur um irgendwelche buttontexte zu ändern ist reine verschwendung.. jquery würde ich heute nur noch nutzen.. wenn es ein ebstehndes projekt ist welches eh schon ntzt.. oder wenn etwas auch in älteren ie versionen laufen muss.. sonst ist es sinnfrei
http://youmightnotneedjquery.com/

 

[Teisi]

jQuery ja und nein - kommt darauf an wie faul du bist.
Es ist mühsam vernünfige Plugins in Vanilla zu finden - Slider z. B. oder Ajax oder oder oder...
Die auch noch Browserübergreifend funktionieren.

Außerdem ist euer fancy "let" used code fürn arsch - läuft auf der hälfte der Browser weltweit noch gar nicht richtig...

@thread, grundsätzlich: Wenn es um eine Webseite geht, bei der du nicht weißt mit was der User surft - und du keine "app" baust = bau deine Webseite so das alles(!) auch ohne JavaScript funktioniert, erst dann kannst du es mit js "verschönern".
Deine User werden sich freuen, SEO freut sich - alle glücklich...

 

[kling1]

jQuery ja und nein - kommt darauf an wie faul du bist.
Es ist mühsam vernünfige Plugins in Vanilla zu finden - Slider z. B. oder Ajax oder oder oder...
Die auch noch Browserübergreifend funktionieren.

Außerdem ist euer fancy "let" used code fürn arsch - läuft auf der hälfte der Browser weltweit noch gar nicht richtig...

@thread, grundsätzlich: Wenn es um eine Webseite geht, bei der du nicht weißt mit was der User surft - und du keine "app" baust = bau deine Webseite so das alles(!) auch ohne JavaScript funktioniert, erst dann kannst du es mit js "verschönern".
Deine User werden sich freuen, SEO freut sich - alle glücklich...

let geht aktuell nur nicht im opera mini.. dern man vernachlässigen kann https://caniuse.com/#search=let

diese noscript seiten.. sind auch so sachen aus der vergangenheit.. wie jquery plugins.. trend geht immer mehr zu spa komplett in javascript.. überhaupt.. sollte jemand der kein javascript.. warum auch immer.. in seinem browser aktieviert hat.. kaum noch ne seite nutzen können

für ajax gibt es ja das native fetch.. das nur im ie nicht geht.. und bessere alternativen wie axios

 

[Nase]

Dem kann ich nur zustimmen. Würde ich jetzt ein Projekt starten, würde da auch kein jQuery mehr reinkommen. Der Mehrwert ist einfach zu gering geworden. Zumindest für die Dinge, die ich bisher nutze.

Neue Features verbreiten sich auch sehr viel schneller als früher - Auto-Update sei Dank.

 

[Teisi]

na dann viel spass, wenn ihr mal nen größeren kunden habt, mit nem größerem shop... da sind dann 3-4 prozent user bei denen es nicht geht - ganz schön viel...

Und SEO? Selbst Google hat noch immer Probleme JavaScript wirklich zu verstehen... von den anderen suchmaschienen will ich garnicht erst anfangen...

Und hast du schon mal alle Geräte getest die aktuell so ins internet können? Fernseher z. B. oder Kühlschränke? Ach du kacke... probiers lieber nicht...

Und statistiken sind auch meistens (nicht immer aber zu min. 90%) auch fürn arsch - weil wie werden denn diese statistiken gemacht? (also wie viel prozent jeder browser verbreitet ist)
Richtig mit user die diese Seiten ansurfen - und wer macht das? Richt leute wie wir, die sowieso immer auf dem aktuellsten stand sind.

Wenn ich mir da die statistiken von analytics von manchen seiten an gucke... oh man was da noch alles unterwegs ist... ^^

Also ich finds nicht schlimm jQuery zu nutzen, es gibt heut zu tage soooo viele andere stellschrauben - die viel wichtiger sind. Videos, Bilder, unsauberer code, nicht optimierter code... etc.

Aber wenn du wirklich pur js nutzen willst, kannst du dich ja bei jQuery bedienen. Such dir den Code schnippsel von jQuery den du brauchst und gut ist. Dann brauchst du tatsächlich nicht den ganzen core...


Schon allein darum kommt es extrem darauf an:
Wie viel Zeit willst du in den Code investieren? (wirds bezahlt?)
Was ist die Zielgruppe?
Webseite oder Web-App?
usw.

 

[Nase]

Es geht doch überhaupt nicht darum, ob es "schlimm" ist, jQuery zu benutzen. Es geht darum, ob es für das Projekt notwendig ist. Und ja: Die Zielgruppe ist entscheidend und die kenne ich für meine Projekte sehr gut - Kühlschränke gehören nicht dazu .

Zum Thema SEO und Javascript schreibt Google selbst:

In 2009, we made a proposal to make AJAX pages crawlable. Back then, our systems were not able to render and understand pages that use JavaScript to present content to users. Because "crawlers … [were] not able to see any content … created dynamically," we proposed a set of practices that webmasters can follow in order to ensure that their AJAX-based applications are indexed by search engines.

Times have changed. Today, as long as you're not blocking Googlebot from crawling your JavaScript or CSS files, we are generally able to render and understand your web pages like modern browsers.

Quelle: https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html, Oktober 2015

 

[Teisi]

ja und was ist wenn javascript nach geladen wird...? Ist mir zu unsicher - wenns seo betrifft.
Außerdem wie gesagt das betrifft nur Google... Google ist aber nicht alleine da draußen...

 

[kling1]

das mit dem javascript nachladen kann man mit serverside rendering lösen.. alles kein problem..

 

[Teisi]

das kommt wieder darauf an, aber auf jedenfall erhöht es die Serverlast!

Vielleicht ganz nett zu lesen für alle (kurze erklärung unterschied):
https://stackoverflow.com/questions...-this-template-using-javascript-or-the-server

 

[kling1]

das kommt wieder darauf an, aber auf jedenfall erhöht es die Serverlast!

Vielleicht ganz nett zu lesen für alle (kurze erklärung unterschied):
https://stackoverflow.com/questions...-this-template-using-javascript-or-the-server

ist 5 jahre alt

 

[Teisi]

ändert ja nichts daran...

 

[Soedy]

@thread, grundsätzlich: Wenn es um eine Webseite geht, bei der du nicht weißt mit was der User surft - und du keine "app" baust = bau deine Webseite so das alles(!) auch ohne JavaScript funktioniert, erst dann kannst du es mit js "verschönern".
Deine User werden sich freuen, SEO freut sich - alle glücklich...

... nur dass das kein Kunde zahlt. Der will alles dynamisch, hier nen Slider, da nen Datepicker... da musste theoretisch eine zweite Seite parallel bauen. Für den kleinen Nutzerteil, der JS deaktiviert hat, lohnt es sich meist nicht.

 

[Teisi]

@Soedy,
tja keine Ahnung was ihr für Kunden habt... (Wordpress Kunden was? *Scherz)
Unsere machen das schon, und legen durchaus auch wert darauf.
Außerdem ist es in den meisten Fällen nicht besonders schwer, den Content auch anzeigen zu lassen wenn kein JS da ist... und die par bytes die der HTML Source dabei größer wird - ich bitte euch - vernachlässig bar.

Allerspätestens fällst du damit auf die Schnautze, wenn dein Kunde plötzlich eine eigene "SEO"-Agentur oder was auch immer, sich zulegt und die über deine Seite guckt. Denn dann gehts mäckern los...