javascript variable per klick ändern

html.de-Forum JavaScript
1

hallo leute,

ich habe ein javascript, in dem die anzeige eines bildes gesteuert wird. dort ist ein zoomfaktor drin, den ich derzeit konstant habe. ich würde aber gerne dem nutzer die möglichkeit geben diesen faktor zu verändern.
das heißt die variable im javascript muss per klick geändert werden.
außerdem brauche ich den faktor auch noch einmal im html, da dort die größe des bildes ist. am liebsten würde ich diese größe auch per javasript ändern, da ich keinen reload der seite brauchen kann.

also wie bekomme ich eine variable per klick geändert, die ich in einem script verwenden kann?! und wie kann ich die variable dann noch auf das bild anwenden?

meine beiden scripte sehen so aus:
js:

document.getElementById('zoombild').style.left = -7*(m.left - p.left)+100+"px"; document.getElementById('zoombild').style.top = -7*(m.top - p.top)+100+"px";und html:

<img src="../bilder/....jpg" height="7*400" width="7*600" alt="tafel" border="0" />die roten zahlen habe ich jetzt nur als „demonstration“ eingefügt. aber dort sollte die variable dann rein. möchte mir zwei buttons erstellen, die den faktor entweder um 1 erhöhen, oder verringern

2

du machst folgendes.
zuerst einmal definierst du für deine zoom geschichte eine Funktion, der du den Zoomfaktor mitgibst (von außen)

var zoomFactor = 1;

function zooming() {
    document.getElementById('zoombild').style.left = zoomFactor*(m.left - p.left)+100+"px";
    document.getElementById('zoombild').style.top = zoomFactor*(m.top - p.top)+100+"px"; 
}

Dann machst du 2 Funktionen noch für zoomIn und zoomOut, die durch das Button drücken ausgelöst werden. Außerdem definierst du noch außerhalb der Funktion eine Variable die du zoomFactor nennst deren wert standardmäßig auf 1 ist.
Nun musst du bei einer Sache aufpassen. Sollte der Faktor auf 0 runtergehen bzw wenn er im Minus Bereich war auf 0 steigen, dann ist das Bild 100 x 100px groß.
Heisst das musts du abfangen. hier der Beispielcode zu zoomOut


var zoomFactor = 1;

function zoomOut() {
  if(zoomFactor == 1) {
     zoomFactor += 2;
  } else {
    zoomFactor++;
  }
  
  zooming(zoomFactor);
}

Hoffe das hilft dir

3

ja hatte es inzwischen gelöst^^
und funktioniert auch :slight_smile:

trotzdem danke