如何通过JS更改按钮URL? [英] How to change button URL through JS?

问题描述

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

I have been spending a lot of time researching how to change a button href dynamically in my website using JS. I have a functioning Wordpress website, but would like to add some small additional functionality using JS to change a button's link based on a few user options.

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

I have researched this and found answers, but I absolutely cannot get the solutions to work on my site.

在这里找到了最简单的解决方案之一:如何制作选项选择更改按钮链接?

One of the simplest solutions that should work was found here: How to make option selection change button link?

我无法理解我正在尝试完成的工作与已接受的答案提出的内容有何不同.我添加了 window.onload() 以防止 JS 在元素加载之前运行.

I can't understand what is different between what I am trying to accomplish and what the accepted answer proposed. I added window.onload() to prevent the JS from running before elements were loaded.

我正在尝试使用以下 HTML & 做类似的事情JS代码:

I am trying to do something similar with the following HTML & JS code:

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>

JS 代码:

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 小提琴:https://jsfiddle.net/w65c9x2d/

推荐答案

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

I think your code to change the href is correct. However, the onload function is not immediately invoked for the code to work.

window.onload = function(e) {

  var booktype = document.getElementById("input-book-type");
  var pagesize = document.getElementById("select-page-size");
  var pagenum = document.getElementById("select-page-num");
  var projtitle = document.getElementById("input-project-title");

  document.getElementById("design-button").onclick = function() {
    this.href = "http://design.framesmile.com/?sessionid=guest&ref=" + booktype.value + pagesize.value + "*projectName=" + projtitle.value + " / ";
    console.log(this.href);
  };
}();// invoke the function

<input type="hidden" id="input-book-type" 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>

<select id="select-page-num">
  <option value="20">20</option>
  <option value="22">22</option>
</select>

<br>
<br>

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

<br>
<br>


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

这篇关于如何通过JS更改按钮URL?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！