Javascript - Embed Resize - Groesser & Kleiner Buttons ?

[DualityMind]

Hallo CBs Programmierer

Habe da wieder ein kleines Problem mit Javascript und zwar folgendes. Habe über 1 Stunde GeGoogelt, aber kein passendes Thema dazu gefunden :-( !

Ich will per Buttons (kleiner und grösser) Einstellen eines Embed Videos auf der Website:

Ich habe bisher diesen Code dazu:

1. Der Button:

<button onclick="myFunction()">Groesser</button>

2. Die Funktion

<script>
function myFunction() {

    height_change = 400;
    width_change = 600;

    document.getElementById("myImg").myImg.height = height_change;
    document.getElementById("myImg").myImg.width = width_change;
}
</script>

3. Die ID Vergabe

<embed src="../apps/<?php echo $embed; ?>" type="application/x-shockwave-flash" id=myImg etc...!

Es funktioniert so, aber nur mit der Vorgegeben Grösse (siehe height_change und width_change) !

Wenn jetzt jemand den Button "Groesser" klickt, sollte er das Embed um 50 Pixel Vergrössern und wenn jemand auf Kleiner Button Klickt um 50 Pixel Verkleinern ?

Zuerst habe ich gedacht, naja wird nicht schwierig sein um habe bei "height_change = 400 + 50 ) probiert, aber es bleibt immer bei der vorgegebenen Grösse.

Kann mir jemand helfen, die genaue Syntax dafür zu finden ? Wäre sehr froh, dann bin ich im Projekt schon wieder einen Schritt weiter.

Falls jemand Plan hat, vielleicht auf diese Vorlage erweitern ?

Danke an Alle und hoffe ihr bleibt noch ein Weilchen wach, habe später sicher noch ein anderes Problem

 

[Faizy]

Habe schon länger kein vanilla JS mehr geschrieben, aber Folgendes sollte helfen:

<script>
function resize() {
    const img = document.getElementById('foo').
    const size = img.getBoundingClientRect();

    img.height = size.height + 50;
    img.width = size.width + 50;

}
</script>

https://developer.mozilla.org/de/docs/Web/API/Element/getBoundingClientRect

 

[Hancock]

Zuerst habe ich gedacht, naja wird nicht schwierig sein um habe bei "height_change = 400 + 50 ) probiert, aber es bleibt immer bei der vorgegebenen Grösse.

so geht das nicht, da 400+50 immer 450 ist.
Probier mal

height+=50;

oder

height=height+50;

 

[DualityMind]

Hallo

Danke nochmals für die vielen Antworten.

Habe jetzt alle Varianten getestet aber es will einfach nicht.

@Faizy: Der Code funktioniert leider nicht. Sollte statt "Foo" nicht "myImg" stehen ?

const img = document.getElementById('foo').

@Hancock: Kannst Du bitte einen genaueren Code angeben, mit meiner Vorlage ? Es funktioniert leider auch nicht ganz.

Irgendwo steckt der Wurm drin. Wahrscheinlich fehlt noch irgend ein Code Fragment.

Ich hoffe es kann gelöst werden. Bin sicher noch 1 Stunde Online. Hoffe jemand hat Plan

 

[Hancock]

Ja, kann ich:

document.getElementById("myImg").myImg.height += 50;
document.getElementById("myImg").myImg.width += 50;

Tipp: Wenn du F12 drückst (im Browser), geht die Entwicklerkonsole auf. Da gibt's ein Tab (Konsole), wo du beliebiges JS eintippen kannst und die Effekte direkt siehst.

 

[DualityMind]

@Hancock: Wusste das gar nicht mit F-12 danke vielmals für den Tipp :-)))!

Schreibe im Moment mit "Ultra Edit" und es geht einigermassen, aber mit F-12 umso besser :-)!

In der Konsole kommt folgender Fehler, sobald ich "Grösser" Button Anklicke:

SCRIPT5007: Unable to get property 'height' of undefined or null reference

Das kommt immer wenn ich den Button Klicke :-( ?

Hast Du Plan, wieso er das Height nicht übernimmt ?

Ergänzung (22. Juli 2018)

Natürlich hat Computerbase.de (mit F-12 Keine Fehler)

Bei mir kommen sicher 20 Fehler pro .php Seite LOL

Naja, man kann nur weiter Lernen und Lernen. Danke für den Tipp @Hancock :-)!

 

[mastaqz]

Dein Grundsatzproblem ist, dass du irgendwas zusammenkopierst und dir dann zu wenig Fragen stellst, was da eigentlich passiert.

Bau Pseudocode: Was soll wann in deinem Code passieren. Das ist der Hauptteil der Arbeit.

Lösung für dein Problem:

// finde die aktuelle Größe des Elements
const redDiv = document.(?)
const currentRedDivHeight = redDiv.(?)

// erstelle einen neuen Wert aus dem aktuellen Wert plus 50px
const newRedDivHeight = (?) + 50;

// setze die aktuelle Größe des Elements auf den neuen Wert
redDiv.style.height = `{?}px`;

Die einzelnen Lösungen stehen hier alle im Thread, also dort nochmal den Code durchlesen UND verstehen.

Hab es kurz selbst erstellt: Video