onchange in javascript not working

Question

This is my code:

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery-2.2.1.min.js"></script>
<script src="slike.js"></script>
<title>Uvod v jQuery</title>
</head>
<body>

<select id="izberi" onchange="yes()">
  <option value="1">Slika 1</option>
  <option value="2">Slika 2</option>
  <option value="3">Slika 3</option>
  <option value="4">Slika 4</option>
</select>

<script>
//without function
var tmp = document.getElementById("izberi");
var izbira = tmp.options[tmp.selectedIndex].value;

if(izbira == 1) {
    ...
} else if(izbira == 2) {
    ...
}

//with function
function yes(){
    var tmp = document.getElementById("izberi");
    var izbira = tmp.options[tmp.selectedIndex].value;
    if(izbira == 1) {
        ...
    } else if(izbira == 2) {
        ...
    }
}
</script>

</body>
</html>

In my IF statements I create HTML table, with rows and columns based on what is selected in select. Now if I don't use function ( without onchange in select ) then my code works when I enter the site ( default value of select is 1 ).

But when I select another value for example 2 nothing happens, because my code only executes once ( when I enter the site). Now I tried to fix that with onchange and calling a function ( I have the exact same code in my function ) but if I do that and I select another value my page just goes all white and it looks like my fuction is executing all the time without stop ( the same what happens when the web page is loading )

So where did I make a mistake?

EDIT
I'm using document.write(); to create HTML table while that works when I enter the page it looks like it doesn't work after I select different value and then call the function, that is my problem I think.

http://plnkr.co/edit/r2lf8VnfHULMlTRhN8ID?p=preview - it works — Zoltan Toth, Mar 06 '16 at 14:47
Check the console for any errors in the pieces of code you didn't paste. — xtrinch, Mar 06 '16 at 14:49
@Zoltan Toth yes I didn't even try that, looks like problem is with my other code ty. — yack, Mar 06 '16 at 14:58
@yack : You should never use `document.write();` --> http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — John Slegers, Mar 06 '16 at 15:22

John Slegers · Accepted Answer · 2016-03-06T15:10:04.630

I'm not sure what's wrong with your code, but the following code does exactly what you're going for, and is slightly more elegant.

To try it out, run the snippet or go to this Fiddle.

var izberi = document.getElementById("izberi");
var izbira = document.getElementById("izbira");

var yes = function(){
    var selected = izberi.options[izberi.selectedIndex].value;
    switch(selected) {
        case "1":
            // WHATEVER YOU WANT TO HAPPEN IF IZBERI HAS VALUE "1"
            izbira.value = selected;
            break;
        case "2":
            // WHATEVER YOU WANT TO HAPPEN IF IZBERI HAS VALUE "2"
            izbira.value = selected; 
            break;
        case "3":
            // WHATEVER YOU WANT TO HAPPEN IF IZBERI HAS VALUE "3"
            izbira.value = selected;
            break;
        case "4":
            // WHATEVER YOU WANT TO HAPPEN IF IZBERI HAS VALUE "4"
            izbira.value = selected; 
            break;
        default:
            // WHATEVER YOU WANT TO HAPPEN IF IZBERI HAS ANOTHER VALUE
    }
}

yes();
izberi.addEventListener('change', yes);

<select id="izberi">
  <option value="1">Slika 1</option>
  <option value="2">Slika 2</option>
  <option value="3">Slika 3</option>
  <option value="4">Slika 4</option>
</select>
<input id="izbira">

I tried this but nothing happens, sry i'm noob. But ty for help as others have mentioned my code actually works so the problem is in the code i didn't paste. — yack, Mar 06 '16 at 14:56
@yack If you paste all of your code or at least the relevant parts then someone may be able to help you. — Larry Lane, Mar 06 '16 at 14:58
Apparently nothing is wrong with my code it's just that i have error somewhere in the code that i didn't post, but ty for more elegant code. — yack, Mar 06 '16 at 14:59
@Larry Lane I don't really want to bother you guys with my code, because there is just too much of it. but i'm glad that i know where i have to check for errors now. — yack, Mar 06 '16 at 15:01

onchange in javascript not working

1 Answers1