Javascript 如何通过JS更改按钮URL？

我花了很多时间研究如何使用JS动态更改我网站中的按钮href。我有一个功能正常的Wordpress网站，但我想添加一些小的附加功能，使用JS根据一些用户选项更改按钮的链接

我对此进行了研究并找到了答案，但我绝对无法在我的网站上找到解决方案

在这里可以找到一个最简单的解决方案：

我无法理解我正在努力实现的目标和公认的答案之间有什么不同。我添加了window.onload（）以防止JS在加载元素之前运行

我正在尝试使用以下HTML&JS代码执行类似的操作：

HTML代码：

<input type="hidden" id="input-book-type" value="GlassCrystal">

<br><br>

<select id="select-page-size">
<option value="6x6">6" x 6"</option>
<option value="10x10">10" x 10"</option>
</select>

<br><br>

<input id="input-project-title" value="Optional Project Title">

<br><br>    

<a class="button" id="design-button" href="http://">Design Now</a>

window.onload = function() {

document.getElementById("design-button").onclick = function() {
var booktype = document.getElementById("input-book-type");
var pagesize = document.getElementById("select-page-size");
var projtitle = document.getElementById("input-project-title");

this.href = "http://test/?sessionid=guest&ref="+booktype.value+pagesize.value+"&projectName="+projtitle.value+"/";
};

}

JS小提琴： 以下是示例代码：

<a href="#" id="abc">jhg</a>
<a href="#" id="myLink">jhhghj</a>

<script type="text/javascript">
   document.getElementById("myLink").onclick = function() {
   document.getElementById("abc").href="xyz.php"; 
   return false;
};
</script>

document.getElementById（“myLink”）.onclick=function（）{
document.getElementById（“abc”）.href=“xyz.php”；
返回false；
};

---

我从

取下此按钮，将您的按钮更改为：

<button class="button" id="design-button" onclick="redirect()">Design Now</button>

---

显然，根据您的喜好进行更改：）

我认为您更改href的代码是正确的。但是，不会立即调用onload函数使代码正常工作

window.onload=函数（e）{
var booktype=document.getElementById（“输入书类型”）；
var pagesize=document.getElementById（“选择页面大小”）；
var pagenum=document.getElementById（“选择页码”）；
var projtitle=document.getElementById（“输入项目标题”）；
document.getElementById（“设计按钮”）.onclick=function（）{
this.href=”http://design.framesmile.com/?sessionid=guest&ref=“+booktype.value+pagesize.value+”*projectName=“+projtitle.value+”/”；
console.log（this.href）；
};
}();// 调用函数

6英寸x 6英寸
10英寸x 10英寸




20
22

我建议使用jQuery

$("#submit").on('click', function(event) {
                event.preventDefault();
                data = $("#link").val();
                $("#frame").attr({
                    src: "http://"+data});
            });

单击submit按钮时，它会更改iframe url，从而自动更改iframe的内容

---

我真的不明白你想问什么，但试着修改上面的代码：）

你想更改href还是重定向页面？那么你只想在单击按钮时更新href，还是想在更新输入时更新href？我想更改按钮（id设计按钮）上的href基本上，我认为如果我这样做，在用户更改选项后，当他们单击它时，href将更新为当前状态。避免（避免对href进行不必要的更新）单击按钮时会发生什么？**重要注意事项：您不必使用它来工作，只是认为它比纯文本更好：）是的，在JSFIDLE中它看起来很难看，但在我的网站上它看起来很棒！）好的，在这种情况下，只需使用并将其样式与您的标记相似：）我之所以避免使用它，仅仅是因为它具有我们想要更改的默认行为。谢谢您的建议。谢谢，工作非常顺利。你能详细说明一下到底发生了什么事吗。我以为window.onload（）会在页面加载后立即运行。如果这是一个愚蠢的问题，我很抱歉，我对JS很陌生。基本上，所发生的是将函数分配给“window”对象的“onload”属性。因此，window.onload=function（）{}只是添加了函数体。现在，浏览器不会自己调用函数，所以我们必须自己调用。因此，window.onload=function（）{}（）将在创建函数后立即调用该函数。如果你想了解更多，这个术语就是生活。

$("#submit").on('click', function(event) {
                event.preventDefault();
                data = $("#link").val();
                $("#frame").attr({
                    src: "http://"+data});
            });