Issues With Redirection Using Button Created In Javascript

Question

I have created a button using Javascript and I am trying to open a window with window.open(url). The "url" opens up correctly initially. But then I created another button and did the same as I did earlier but this time around the url redirection got messed up. Both the buttons now open up on the last url that I used. I want both the buttons to work exclusively and open the respective urls that have been mentioned in the code.

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

Are you sure the code is correct. Both your buttons are calling myFunction(). Shouldnt that be myFunction1() for second button. — Vishwanath
– Vishwanath, Commented Jan 19, 2015 at 8:39
Why do you create a button in your code. It doesn't do anything and not visible to the user as well. — eyurdakul
– eyurdakul, Commented Jan 19, 2015 at 8:40
@Vishwanath even if u make it myFunction1() the thing doesn't work. — androidrill
– androidrill, Commented Jan 19, 2015 at 8:41
Some of the links you got does not seem to work. I don't think its a redirection problem, its rather the links that does not work. And you can remove the line var btn = document.createElement("BUTTON"); since its not being used — nilsi
– nilsi, Commented Jan 19, 2015 at 8:57

Somendra Joshi · Accepted Answer · 2015-01-19 09:07:53Z

2

You have used same js function in both the buttons. to avoid confusions keep js at one place

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

edited Jan 19, 2015 at 9:07

answered Jan 19, 2015 at 9:01

Somendra Joshi

1,8831 gold badge11 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

xsist10 Over a year ago

Maybe add some explanation about the changes you made. Or a description about where the question asker went wrong.

androidrill Over a year ago

@Tom I have written ample to make someone understand.

androidrill Over a year ago

@Somendra Beautiful ! Seperating javascript from the code is the best way to do it.

xsist10 Over a year ago

@androidrill Hi, I was commenting on the answer posted by Somendra, not on your original question.

androidrill Over a year ago

@Tom No issues brother.Thanks for contributing.

Kaustav Banerjee · Accepted Answer · 2015-01-19 08:58:16Z

I tried executing the code you have provided and by changing the function call from the second button to call myFunction1 rather than myFunction, I was able to access the two urls separately.

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

I attached the code here for your reference. However, it is same as yours, apart from the invocation of the javascript function

Collectives™ on Stack Overflow

Issues With Redirection Using Button Created In Javascript

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related