Grafik vervielfachen

darth112

darth112

Grünschnabel
hallo,

ich habe hier einen kleinen kalkulator der mir einfache rechnungen macht, jetzt möchte ich aber dazu auch etwas grafik und hab keine ahnung wie angehen.

es soll wenn in einem formularfeld die zahl 5 steht, nach ausführen der funktion über den button, 5 mal eine grafik (die gleiche) eingefügt werden.
bei 10 dann 10 mal die grafik usw.

gibt es hier eine einfache lösung?

danke im voraus
 
Hi,

Bildobjekte kannst du über new Image anlegen. Einbinden kann über die Methode appendChild des node-Objektes erfolgen.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
// Bildquelle
var strImgSrc = "bild.gif";

function drawImages(){
  // Input-Element
  var objSrc = document.getElementById("idAnz");
  // Anzahl geforderter Bilder
  var intAnz;

  // Falls kein gültiger Wert eingegeben wurde
  if(isNaN(intAnz = parseInt(objSrc.value)))
    return false;

  // Zielelement ermitteln und Inhalt löschen
  var objDest = document.getElementById("outputDiv");
  objDest.innerHTML = "";

  // Anzahl der geforderten Bilder in Zielelement einhängen
  for(var i=0; i<intAnz; i++){
    var objImg = new Image();      // Neues Bildobjekt
    objImg.src = strImgSrc;        // Quelle zuweisen
    objDest.appendChild(objImg);   // Bildobjekt in Zielelement einhängen
  }

  return true;
}
 //-->
</script>
</head>
<body>
<div>
  <input type="text" id="idAnz" value="3">
  <button onclick="drawImages()">drawImages</button>
  <div id="outputDiv"></div>
</div>
</body>
</html>

Im Übrigen möchte ich dich bitten, dich - wie in der Netiquette in Punkt 15 zugestimmt - an die Gross- und Kleinschreibung zu halten. Besten Dank im voraus.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück