如何通过 JS 更改按钮 URL？

Question

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

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

在这里可以找到最简单的解决方案之一： How to make option selection change button link?

我无法理解我想要完成的工作与所提出的公认答案之间有什么不同。我添加了 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>

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/

Answer 1

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

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>

Answer 2

这里是示例代码：

<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>

我是从here那里得到的

Answer 3

将您的按钮更改为：

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

现在不再使用链接，只需执行一个函数，该函数将接受输入并更改 window.location.href（或您喜欢的任何方法）来更改页面。

redirect(obj) {
    window.location.href = "http://test/?sessionid=guest&ref="+booktype.value+pagesize.value+"&projectName="+projtitle.value+"/"
}

显然根据自己的喜好更改它:)

Answer 4

我推荐使用 jQuery。

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

当点击提交按钮时，它会改变 iframe url，从而自动改变 iframe 的内容。

我不太明白你想问什么，但尝试修改上面的代码:)