[英]Change an onclick value with javascript
我对JS很陌生,也许这是一个非常平庸的问题,但我仍然不知道出了什么问题。 我有这个简单的html代码:
<span>1</span>
<input id="check1" type="radio" value="a1"/>
<span>2</span>
<input id="check2" type="radio" value="b2"/>
<span>3</span>
<input id="check3" type="radio" value="c3"/>
<span>4</span>
<input id="check4" type="radio" value="a4"/>
<span>5</span>
<input id="check5" type="radio" value="b5"/>
<input id="red" type="button" value="Go" onclick=""/>
我想实现的是,基于选中的无线电,更改onclick属性。 例如,如果check1和check2被选中,请转到google.com,check1和check3如果要访问jsfiddle.net等。 所以我写了一个简单的Javascript:
window.onchange = function redirect(){
if (document.getElementById('check1').checked && document.getElementById('check2').checked) {
location.href='www.google.com';
// document.getElementById('red').onclick="www.google.com"
}
else if (document.getElementById('check1').checked && document.getElementById('check3').checked) {
location.href='www.jsfiddle.net';
// document.getElementById('red').onclick="window.open('www.jsfiddle.net')"
}
}
在这里,您可以找到JS小提琴。 我想做的就是像使用图像一样设置onclick属性,使用getElementById然后设置他的源代码,所以我写了document.getElementById('red')。onclick =“ window.open('random page') ”,但由于某种原因,我无法理解它是行不通的。
问题:
1)正如您在我的代码中看到的那样,我编写了一个location.href ='address',显然它不等待用户单击按钮,所以这不是解决方案,我该如何做呢?
2)有没有办法使这段代码更具可伸缩性? 我的意思是,如果将来我想添加另一个无线电,则在考虑到类似以下内容时,我将不得不手动修改代码并插入其他代码:
var radio = document.getElementByName('radio') //not sure if this is the right getElement
for (var i=1; i<radio.lenght; i++){
if radio[i].checked{ //is this right?
for (var n=i+1; n<radio.lenght; n++){
if radio[n].checked{
document.getElementById('red').onclick="window.open('random page')"
}
}
}
欢迎对我的代码提出任何建议。
在JS Fiddle中尝试一下。 它包含如何侦听按钮的onclick事件以及如何获取单选按钮的检查值。
HTML部分:
<form action="">
<input type="radio" name="vehicle" value="Yes" id='yes'>Yes<br>
<input type="radio" name="vehicle" value="No" id='no'>No
</form>
<input id="red" type="button" value="let's go"/>
JS部分:
document.getElementById('red').onclick = function() {
if (document.getElementById('yes').checked) {
alert('I have a Vehicle.');
} else if(document.getElementById('no').checked) {
alert('I don\'t have a Vehicle.');
} else {
alert('No answer.');
}
}
如果使用单选按钮,并且一次只希望用户选择一个,则必须为其设置相同的名称属性。
您还可以使用单选按钮的value属性来存储重定向URL。
这是一个对您更有用的示例。
HTML部分:
<form action="">
<input type="radio" name='redirect' value='https://www.google.com/' id='google'>Google<br />
<input type="radio" name='redirect' value='http://www.jsfiddle.net/' id='jsFiddle'>JS Fiddle<br />
<input type="radio" name='redirect' value='https://www.facebook.com/' id='Facebook'>Facebook
</form>
<input id="red" type="button" value="let's go"/>
JS部分:
document.getElementById('red').onclick = function() {
var options = document.getElementsByName('redirect'),
length = options.length,
i = 0;
for (i; i < length; i++) {
if (options[i].checked) {
window.open(options[i].value);
}
}
}
if (document.getElementById('check1').checked&&document.getElementById('check2').checked)
{
document.getElementById('red').onclick=function(){
window.location.href ='http://www.google.com';
};
}
此代码将函数绑定到id ='red'的元素的onclick事件。 因此,每当选中/取消选中任何单选按钮时,添加一堆这样的条件并更改onclick绑定。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.