Need javascript button fixed for the mobile version of a website

  • Resolved jordanvala

    (@jordanvala)


    5 years, 1 month ago

    Hey all. I was wondering if I could get some help with this. I had a custom cross-reference search built for my website (Javascript and HTML). It works fine but for some reason, I cannot get the “Go” button to do anything on the mobile version of the website. Tried a few different things and can seem to figure it out, Thanks.

    <html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
	  .searchBar {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
      }
	  .barItem {
        height: 28.5px;
        text-align: center;
        color: black;
      }
    </style>
  </head>
  <body>
		<!-- just change the information in the style tag for each item, if you need to adjust-->
		<div class="searchBar" style="margin-bottom: 0;">
			<p class= "barItem"> <pre>  Brand:     Part Number:</pre> 

		</div>
		<div class="searchBar" style="margin-top: 0;">
      		<select style="width: 100px;" name="brand" class="barItem" id="choice" >
           		<option selected="selected" value="Power Team">Power Team</option>
           		<option value="Enerpac">Enerpac</option>
           		<option value="BVA">BVA</option>
           		<option value="Simplex">Simplex</option>
         	</select>
          	<!-- Change the maxlength if you have any product numbers beyond 10 characters -->
		 	<input class="barItem" style="width: 100px; color: black;" type="text" name="partNum" id="pNum" maxlength="10" />
         	<button class="barItem" style="width: 40px" id="submit" onclick={onSubmit()}>GO</button>
        </div>
        <p id="result">

        <a href="#" id="link"></a>	
    <script type="text/javascript">

      let input, iterator, selected;
      let choice = document.getElementById("choice")
      let result = document.getElementById('result');
      let link = document.getElementById('link');

      // Collects the input from the text field
      function inputHandler() {
input = document.getElementById("pNum").value;
input = input.toUpperCase()
selected = choice.options[choice.selectedIndex].value;
}

      // Checks if the item is on the cross reference sheet
      function findItem(input) {
        if(selected == 'BVA'){
          iterator = BVA.indexOf(input)
        }
        else if(selected == 'Enerpac'){
          iterator = Enerpac.indexOf(input)
        }
        else if(selected == 'Power Team'){
          iterator = PowerTeam.indexOf(input) 
        }
        else if(selected == 'Simplex'){
          iterator = Simplex.indexOf(input)
        }
        response(iterator)
      }

      // Creates the response to the correct URL if the item was found other wise it will tell you to try again
      function response(i) {
        if(i >= 0){
          result.innerHTML = <code>The ${selected} ${input} compares to Freedom's Product ${FREEDOM[i]} (${Title[i]}).</code>;
          link.innerHTML = <code>View the ${FREEDOM[i]} Information Here.</code>;
          link.href = <code>https://freedomhydraulics.flywheelsites.com/product/${URL[i]}</code>;
        }
        else {
          result.innerHTML = <code>${input} is not made by ${selected}</code>;
        }
      }

      // Starts the sequence from the GO button
      function onSubmit() {
        inputHandler();
        findItem(input)
      } 
    </script>
  </body>
</html>

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    There is a JS error that must be resolved:

    SyntaxError: redeclaration of let BVA cross-reference:461:1
    <anonymous> https://freedomhydraulics.com/cross-reference/:461

    The entire inline script is loaded twice on the page. There are also multiple head and body sections so the HTML would not validate.

    Thread Starter jordanvala

    (@jordanvala)

    The two forms for mobile and DT were the problem. Got it figured out.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Need javascript button fixed for the mobile version of a website’ is closed to new replies.