按钮在我的HTML的某些部分中不起作用

Question

I have a button id="getstarted" located near the top and the bottom of my HTML. The button near the top works, but the one near the bottom does not work. They are formatted exactly the same. I want both buttons to work.

Here is my code. **edited code. I added onclick="window.location.href = 'getstarted.html';" to my buttons. now the first button works, but the second one does not work. how do I get the second button to work?

 $(document).ready(function() { $(window).scroll(function() { if ($(this).scrollTop() > 70) { $('#header').fadeIn(500); } else { $('#header').fadeOut(500); } }); }); $(document).ready(function() { $(window).scroll(function() { if ($(this).scrollTop() > 70) { $('#pricing').css("color", "#000"); } else { $('#pricing').css("color", "#FFF"); } }); }); // slideshow $(document).ready(function() { $("#laptopslideshop > div:gt(0)").hide(); setInterval(function() { $('#laptopslideshop > div:first') .fadeOut(500) .next() .fadeIn(500) .end() .appendTo('#laptopslideshop'); }, 3000); }); 

 @import url('https://fonts.googleapis.com/css?family=Nunito+Sans'); * { box-sizing: border-box; margin: 0; padding: 0; } #header { position: fixed; top: 0px; width: 100%; height: 84px; background-color: #FFFFFF; color: #000; z-index: 1; display: none; } @media (max-width: 768px) { #header { height: 60px; } } #main { height: 100vh; width: 100%; background: url(Images/teamchat.jpg) no-repeat center; background-size: contain; background-size: cover; } .headerContents { text-align: right; height: 100%; width: 100%; float: right; z-index: 2; position: fixed; } .headerpandc { margin-right: 18%; margin-top: 17px; position: relative; } @media (max-width: 768px) { .headerpandc { margin-right: 4%; margin-top: 14px; } } #pricing { font-family: Nunito Sans; margin-right: 55px; font-weight: 800; letter-spacing: 0.1em; font-size: 18px; text-decoration: none; color: #FFF; transition: 0.6s; } @media (max-width: 768px) { #pricing { font-size: 12px; margin-right: 3%; } } @media (max-width: 355px) { #pricing { display: none; } } #pricing:hover { text-decoration: underline; } #pricing:active { color: #000; } #getstarted { font-family: Nunito Sans; background-color: #5a52ff; border-radius: 10px; border: none; color: white; padding: 11px 25px; text-align: center; font-size: 18px; transition: 0.3s; text-decoration: none; cursor: pointer; font-weight: 800; letter-spacing: 0.05em; outline: none; } @media (max-width: 768px) { #getstarted { padding: 8px 15px; font-size: 12px; } } #getstarted:hover { background-color: #3d33ff; } #getstarted:active { transform: translateY(2px); box-shadow: 0 1px #666; } #telosdesignlogo { float: left; height: 30px; margin-left: 18%; margin-top: 6px; } @media (max-width: 768px) { #telosdesignlogo { margin-left: 4%; height: 23px; } } /*main text*/ #mainbox { height: 470px; width: 500px; text-align: left; position: relative; top: 250px; left: 28%; font-family: Nunito Sans; color: #FFF; } #hitelos { font-size: 2.5em; font-weight: lighter; } #maintext { font-weight: 800; font-size: 3.5em; } #mainpricing { z-index: 5; } /* Laptop slideshow begins */ #laptopslideshop { position: relative; margin-top: 50px; width: 240px; height: 240px; padding: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); } .mySlides { position: absolute; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div id="header"></div> <div class="headerContents"> <div class="headerpandc"> <a id="pricing" href="pricing.html">Pricing</a><button id="getstarted" onclick="window.location.href = 'getstarted.html';">Get Started</button> <a href="index.html"><img src="Images/TelosLogo with text.png" href="index.html" alt="TelosDesign" id="telosdesignlogo" /></a> </div> </div> <div id="main"> <div id="mainbox"> <div id="hitelos"> Hi! We're Telos. </div> <div id="maintext"> Beautiful websites tailored to your unique business. </div> <button id="getstarted" onclick="window.location.href = 'getstarted.html';">Get Started</button> </div> </div> <div id="laptopslideshop"> <div> <img class="mySlides" src="Images/laptoppic1test.png" alt="Laptop and Phone" /> </div> <div> <img class="mySlides" src="Images/laptoppic2test.png" alt="Laptop and Phone" /> </div> </div> 

Answer 1

id should be unique to an element(just one), use a class instead

In your code you use javascript(jquery) to control href , not html, see onclick .

<button id="getstarted" onclick="window.location.href = 'getstarted.html';">

The javascript is taking in consideration only the first element because no other element with the same id should exist.

--

I see that you have also:

  <script type="text/javascript" src="app.js"></script>

What this code is doing ?

Check the web browser console for JavaScript errors from other sources/code.

Answer 2

Try with this code

  <a id="pricing" href="http://google.com">Pricing</a> <a href="http://google.com" target="_blank"><button id="getstarted">Get Started</button></a> <a href="index.html"> <img src="Images/TelosLogo with text.png" href="http://google.com" alt="TelosDesign" id="telosdesignlogo"></a>