使用在Javascript中创建的按钮进行重定向的问题

时间:2015-01-19 08:33:03

标签: javascript html

我使用Javascript创建了一个按钮,我试图用window.open(url)打开一个窗口。 “url”最初打开正确。但后来我创建了另一个按钮并按照我之前的做法做了同样的事情,但这次绕过网址重定向搞砸了。这两个按钮现在都在我使用的最后一个URL上打开。我希望这两个按钮都可以独占使用,并打开代码中提到的相应网址。

  <div style="float:left;padding-right:30px;padding-bottom:30px;">
  <div>
 <img src="http://3.bp.blogspot.com/-7zqUR_RPEH8/VLxzHDIQXoI/AAAAAAAAAkM/388tnESCv9g/600/peacock-aeromech.jpeg" height="200px" 
  width="200px"/>
 </div>
  <div>
  <button onclick="myFunction()">Try it</button>
  <script type="text/javascript">
  function myFunction() {
  var btn = document.createElement("BUTTON");
  window.open("http://dl.amazon.com/dl/peacock-aeromech/p/itmdzdt4jdseczzh?pid=BLCDCYYHCKHVJDJG&srno=t_1&query=Lego&offer=b%3Amp%3Ac%3A112f129912.&affid=saurabhsu1","_self")
  }
  </script>
  </div>
  </div>

  <div style="float:left;padding-right:30px;padding-bottom:30px;">
  <div>
  <img src="http://3.bp.blogspot.com/-7OoAscM_6WI/VLxzGLzimNI/AAAAAAAAAj0/L424sw9xDIg/s1600/lego-school-bus.jpeg" height="200px" width="200px"/>
  </div>

   <div>
   <button onclick="myFunction()">Try it</button>
   <script type="text/javascript">
   function myFunction1() {
   var btn = document.createElement("BUTTON");
   window.open("http://dl.amazon.com/dl/lego-school-bus/p/itmdxsxgj7gfdzgk?pid=BLCDXSXFP3UTMYEX&srno=t_1&query=Lego&offer=b%3Amp%3Ac%3A11eaee7b19.&affid=saurabhsu1","_self")
   }
  </script>
  </div>
  </div>

2 个答案:

答案 0 :(得分:2)

您在两个按钮中都使用了相同的js功能。避免混淆将js保持在一个地方

<div style="float:left;padding-right:30px;padding-bottom:30px;">
	<div>
		<img src="http://3.bp.blogspot.com/-7zqUR_RPEH8/VLxzHDIQXoI/AAAAAAAAAkM/388tnESCv9g/s1600/peacock-aeromech.jpeg" height="200px" width="200px"/>
	</div>
	<div>
		<button onclick="myFunction()">Try it</button>
	</div>
</div>
<div style="float:left;padding-right:30px;padding-bottom:30px;">
	<div>
		<img src="http://3.bp.blogspot.com/-7OoAscM_6WI/VLxzGLzimNI/AAAAAAAAAj0/L424sw9xDIg/s1600/lego-school-bus.jpeg" height="200px" width="200px"/>
	</div>
	<div>
		<button onclick="myFunction1()">Try it</button>
	</div>
</div>

<script type="text/javascript">
   function myFunction() {
  	 window.open("http://dl.amazon.com/dl/peacock-aeromech/p/itmdzdt4jdseczzh?pid=BLCDCYYHCKHVJDJG&srno=t_1&query=Lego&offer=b%3Amp%3Ac%3A112f129912.&affid=saurabhsu1","_self")
   }
   function myFunction1() {
   	window.open("http://dl.amazon.com/dl/lego-school-bus/p/itmdxsxgj7gfdzgk?pid=BLCDXSXFP3UTMYEX&srno=t_1&query=Lego&offer=b%3Amp%3Ac%3A11eaee7b19.&affid=saurabhsu1","_self")
   }
</script>

答案 1 :(得分:1)

我尝试执行你提供的代码,并通过从第二个按钮更改函数调用来调用myFunction1而不是myFunction,我能够分别访问这两个URL。

&#13;
&#13;
<html>

<head>
</head>

<body>
  <div style="float:left;padding-right:30px;padding-bottom:30px;">
    <div>
      <img src="http://3.bp.blogspot.com/-7zqUR_RPEH8/VLxzHDIQXoI/AAAAAAAAAkM/388tnESCv9g/600/peacock-aeromech.jpeg" height="200px" width="200px" />
    </div>
    <div>
      <button onclick="myFunction()">Try it</button>
      <script type="text/javascript">
        function myFunction() {
          var btn = document.createElement("BUTTON");
          window.open("http://dl.amazon.com/dl/peacock-aeromech/p/itmdzdt4jdseczzh?pid=BLCDCYYHCKHVJDJG&srno=t_1&query=Lego&offer=b%3Amp%3Ac%3A112f129912.&affid=saurabhsu1", "_self")
        }
      </script>
    </div>
  </div>

  <div style="float:left;padding-right:30px;padding-bottom:30px;">
    <div>
      <img src="http://3.bp.blogspot.com/-7OoAscM_6WI/VLxzGLzimNI/AAAAAAAAAj0/L424sw9xDIg/s1600/lego-school-bus.jpeg" height="200px" width="200px" />
    </div>

    <div>
      <button onclick="myFunction1()">Try it</button>
      <script type="text/javascript">
        function myFunction1() {
          var btn = document.createElement("BUTTON");
          window.open("http://dl.amazon.com/dl/lego-school-bus/p/itmdxsxgj7gfdzgk?pid=BLCDXSXFP3UTMYEX&srno=t_1&query=Lego&offer=b%3Amp%3Ac%3A11eaee7b19.&affid=saurabhsu1", "_self")
        }
      </script>
    </div>
  </div>
</body>

</html>
&#13;
&#13;
&#13;

我在这里附上了代码供您参考。但是,它与你的相同,除了调用javascript函数