简体   繁体   English

javascript中的onchange不起作用

[英]onchange in javascript not working

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.在我的 IF 语句中,我创建了 HTML 表,行和列基于 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 ).现在,如果我不使用函数(在 select 中没有 onchange ),那么当我进入站点时我的代码会起作用( select 的默认值为 1 )。

But when I select another value for example 2 nothing happens, because my code only executes once ( when I enter the site).但是当我选择另一个值时,例如 2 什么也没有发生,因为我的代码只执行一次(当我进入网站时)。 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 )现在我试图通过 onchange 并调用一个函数来解决这个问题(我的函数中有完全相同的代码)但是如果我这样做并选择另一个值,我的页面就会变成全白的,看起来我的功能一直在执行不停地(与加载网页时发生的情况相同)

So where did I make a mistake?那么我在哪里犯了错误?

EDIT编辑
I'm using document.write();我正在使用 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.在我进入页面时创建 HTML 表时,它看起来像在我选择不同的值然后调用该函数后不起作用,我认为这是我的问题。

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 .要尝试一下,请运行代码片段或转到此 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">

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM