Button href changed by select list won't resolve (javasc

Button href changed by select list won't resolve (javascript:window.open(window.variable))

本文关键字：resolve javasc won changed href by select list Button      更新时间：2023-09-26

我正在使用javascript成功地根据用户从选择列表中的选择更改按钮的href。然而，href值是一个javascript变量，它已经被我的代码改变后无法解决。

代码如下:

var clickTag1 = "http://www.myexampledomain.com/test-1";
var clickTag2 = "http://www.myexampledomain.com/test-2";
var clickTag3 = "http://www.myexampledomain.com/test-3";
var clickTag4 = "http://www.myexampledomain.com/test-4";
(function() {
	var form = document.forms['swiftForm'];
	
	//document.getElementById('cT_target').href = 'javascript:window.open(window.' + this.value + ')';
	var trigger = document.getElementById('cT_toggle');
	trigger.onchange = function() {
		var link = document.getElementById('cT_target');
		link.href = 'javascript:window.open(window.' + this.value + ')';
	}
})();
<form id="swiftForm">
    <div class="styledSelect">
    	<select name="cT_toggle" id="cT_toggle">
    		<option value="clicktag1">2 meters</option>
    		<option value="clicktag2">4 meters</option>
    		<option value="clicktag3">6 meters</option>
    		<option value="clicktag4">8 meters</option>
    	</select>
   </div>
   <div class="swiftSubmit">
    	<a id="cT_target" href="javascript:window.open(window.clickTag1)">Calculate</a>
   </div>
</form>

在页面加载时，按钮href按预期工作(打开一个包含目标clickTag URL的新窗口)。但是，在通过从选择列表中选择一个新值来更改href之后，href不再打开目标clickTag URL，而只是打开一个空窗口。

问题似乎是javascript变量值(clickTag)在页面HTML中更改后不再评估的事实。

我想知道是否有一些技巧我错过了?

Javascript是区分大小写的，select的值应该匹配变量

的名称

改变
<select name="cT_toggle" id="cT_toggle">
    <option value="clicktag1">2 meters</option>
    <option value="clicktag2">4 meters</option>
    <option value="clicktag3">6 meters</option>
    <option value="clicktag4">8 meters</option>
</select>


<select name="cT_toggle" id="cT_toggle">
    <option value="clickTag1">2 meters</option>
    <option value="clickTag2">4 meters</option>
    <option value="clickTag3">6 meters</option>
    <option value="clickTag4">8 meters</option>
</select>

更改<select>元素中的值以匹配变量名称

HTML: 

<select name="cT_toggle" id="cT_toggle">
    <option value="clickTag1">2 meters</option>
    <option value="clickTag2">4 meters</option>
    <option value="clickTag3">6 meters</option>
    <option value="clickTag4">8 meters</option>
</select>

最好的方法不是对C_Toggle进行onchange操作，而是在链接上触发一个函数，该函数将以C_Toggle的选定值重定向文档

相关文章：