Question

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

我已经研究了这个并找到了答案，但我绝对无法在我的网站上找到解决方案。

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

我无法理解我想要完成的内容与所接受的答案之间的区别。我添加了window.onload（）以防止JS在元素加载之前运行。

我正在尝试使用以下HTML＆amp; 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

以下是示例代码：

var questions = {"ques_id":"1","question":"<p><span class=\\\"math-tex\\\">\\\\(x = {-b \\\\pm \\\\sqrt{b^2-4ac} \\\\over 2a}\\\\)<\/span>&nbsp; &nbsp;Test Question new with mathjax<\/p>","ques_type":"text_based_questions","correctAnswer":3,"choices":[{"option_id":"1","value":"Option A"},{"option_id":"2","value":"Option B"},{"option_id":"3","value":"Option C"},{"option_id":"4","value":"OPtion D"}]};

$('#test-question').html(questions.question);
MathJax.Hub.Queue(["Typeset",MathJax.Hub, 'test-question']);

我是从here

获取的

Answer 2

将按钮更改为：

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

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

{{1}}

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

Answer 3

我认为你改变href的代码是正确的。但是，不会立即调用onload函数以使代码生效。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

我建议使用jQuery。

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

点击提交按钮后，它会更改iframe网址，自动更改iframe的内容。

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

如何通过JS更改按钮URL？

4 个答案: