Javascript: displaying images with onchange event Post: 302925505

Sponsored Content

Top Forums Programming Javascript: displaying images with onchange event Post 302925505 by figaro on Monday 17th of November 2014 02:18:51 PM

11-17-2014

Registered User

Javascript: displaying images with onchange event

I am looking to display the pdf of one of two distributions, depending on what the user selected:

Code:

<script type="text/javascript">
function distributionChange() {
  var img = document.createElement("img");
  var link = 'http://en.wikipedia.org/wiki/xxx#mediaviewer/File:yyy';

  switch (document.getElementById("distributions").value) {
    case 'normal':
      img.src = link.replace("xxx", "Normal_distribution").replace("yyy", "Normal_Distribution_PDF.svg");
      break;
    case 'lognormal':
      img.src = link.replace("xxx", "Log-normal_distribution").replace("yyy", "Some_log-normal_distributions.svg");
      break;
    default:
      img.src = "Distribution not specified.";
  }

  img.setAttribute("width", "320");
  document.getElementById("distribution").appendChild(img);
}
</script>

<select id='distributions' onChange='distributionChange()'>
<option name='option0' value='normal'>normal</option>
<option name='option1' value='lognormal'>lognormal</option>
</select>

<div id="distribution"></div>

Two questions on this:
1- Why are the images appended and not recreated? Rather than overwriting the previous image, the new image is shown next to the old one.
2- Why is the image not actually shown? When doing Ctrl-Shift-J in my browser, the link to the image is correct.

figaro

View Public Profile for figaro

Find all posts by figaro

3 More Discussions You Might Find Interesting

1. AIX

where to get .bm or .pm images

I'm just trying to get a personal picture for a backdrop on my AIX user account at work. Where does one acquire the .bm or .pm files. How do I create them as an unpriveledged user? There are quite a few jpeg's that I would like to use.

2. UNIX for Dummies Questions & Answers

onChange + javascript in perl CGI - question

Hello all, Am trying to include a onChange java script to my perl CGI application which uses POST method to upload files to file_server This is how I embedded javascript in the perl code that renders CGI application print qq| <script type="text/javascript" src="display.js"> </script>...

3. Shell Programming and Scripting

Bash Script to find/sort/move images/duplicate images from USB drive

Ultimately, I'm looking to create a script that allows me to plug in a usb drive with lots of jpegs on it & copy them over to a folder on my hard drive. So in the process of copying I am looking to hash check them, record dupes to a file, copy only 1 of the identical files (if it doesn't exsist...

LEARN ABOUT OSX

img-png

img-png(n)																img-png(n)

__________________________________________________________________________________________________________________________________________________

NAME

       img-png - Img, Portable Network Graphics format (png)

SYNOPSIS

       package require Tk

       package require img::png  ?1.4?

       image create photo ?name? ?options?

_________________________________________________________________

DESCRIPTION

       The  package  img::png  is a sub-package of Img. It can be loaded as a part of the complete Img support, via package require Img, or on its
       own, via package require img::png.

       Like all packages of Img it does not provide new commands, but extends the existing Tk command image so that it supports  files	containing
       raster images in the Portable Network Graphics format (png). More specifically img::png extends Tk's photo image type.

       The  name  of  the new format handler is png.  This handler provides new additional configuration options. See section PNG OPTIONS for more
       detailed explanations.

       All of the above means that in a call like

       image create photo ?name? ?options?

       [1]    Image data in png format (options -data and -file) is detected automatically.

       [2]    The format name png is recognized by the option -format.	In addition the value for the option is treated as list  and  may  contain
	      any of the special options listed in section PNG OPTIONS.

PNG OPTIONS

       The  handler  provides no true options at all, but accepts pairs of keys and values when writing a PNG file. Each pair will be written as a
       named text chunk where the key provides the name of the chunk and the value its contents.  For example

	   png Author <name> Title <title> Description ...

TRANSPARENCY

       If you want to write images to disk which contain transparency information (e.g. PNG with alpha channel) you need at least Tk 8.3.

SEE ALSO

       img-bmp, img-dted, img-gif, img-ico, img-intro, img-jpeg, img-pcx, img-pixmap, img-png, img-ppm, img-ps, img-raw,  img-sgi,  img-sun,  img-
       tga, img-tiff, img-window, img-xbm, img-xpm

KEYWORDS

       image handling, png, tk

COPYRIGHT

       Copyright (c) 1995-2009 Jan Nijtmans <nijtmans@users.sourceforge.net>

Img									1.4								img-png(n)