Custom code help needed using box select and button

Hi I’m having trouble adding a custom feature using the custom code. I’m trying to have a date function using 2 select boxs and if you put a certain date it gives a different message after you hit the button. The location of this function is under the Element finder dropdown. Can anyone help me please.


Here is my site Read-Only:

https://preview.webflow.com/preview/thefifthelement?utm_medium=preview_link&utm_source=dashboard&utm_content=thefifthelement&preview=1ec447e39bf58e802ee9ca3be7d0f16e&mode=preview

HI @leedo and welcome. I have checked your JS and there is one IMHO mistake. After word text you have semicolon that should not be there as it brakes the code. There was another problem with placement of last part of code. You can also simplify your code a bit as you use long selectors instead to save it in variable. This has nothing to do with performance but it will be easier to read.

I can’t customise your code and try if it will work . At first I do not now what exactly you pointing and if you pointing these elements correctly, but here is code I came out with (only slight touch on original). I can’t promise that is correct solution. If you will use more signs you can try JS Switch. but it is just suggestion as I’m not familiar with whole problematic.

const signElement = document.querySelector(".hack12-text.hack12-js");

signElement.addEventListener("click", () => {
  // paste your function - start
  if (
    document.getElementById("Month").options[
      document.getElementById("Month").selectedIndex
    ].text == "January" &&
    document.getElementById("Day").options[
      document.getElementById("Day").selectedIndex
    ].text == "20"
  ) {
    const sign = "Capricorn";
    signElement.innerHTML = sign;
  }
});

Hi thank you for replying so quick in this instant if you open the dropdown of the box labeled element finder it shows two select box I gave them different Ids of month and day so those are the elements I’m pointing to. Also I have a text box which is the what you called sign element but the event listener is looking for when the button is clicked not the textbox.

Can you post here a link to LIVE(published) page (best will be copy you would not touch, means nothing will change while working on it) so I can use devTools to look on it? Also comment out script code

http://thefifthelement.webflow.io/
This is the published page

hi @leedo one more thing can you make an screenshot where is your element that is used to show the sign text? I can’t find it.

I added words so u could see where it is.

ok. give it id eg.sign-term and also comment out your code as I’m getting an error in console. I have cpy of this code I can use.

Okay I’ve re published it with the sign term and commented out code.

hi @leedo this is how you can do that. Hope that give you an idea :wink:

const signTerm = document.querySelector("#sign-term")
const findSignBtn = document.querySelector(".hack-button.hack12-js")

findSignBtn.addEventListener("click", () => {
    // paste your function - start
    if (
      document.getElementById("Month").options[
        document.getElementById("Month").selectedIndex
      ].text == "January" &&
      document.getElementById("Day").options[
        document.getElementById("Day").selectedIndex
      ].text == "20"
    ) {
      const sign = "Capricorn";
       signTerm.innerHTML = sign;
    }

   
  });

Thank you so much!!!

1 Like

here is slightly organised code easy to read

const signTerm = document.querySelector("#sign-term");
const findSignBtn = document.querySelector(".hack-button.hack12-js");
const month = document.getElementById("Month");
const day = document.getElementById("Day");

findSignBtn.addEventListener("click", () => {

  if (
    month.options[month.selectedIndex].text == "January" &&
    day.options[day.selectedIndex].text == "20"
  ) {
    const sign = "Capricorn";
    signTerm.innerHTML = sign;
  }
});

I can’t thank you enough. My mind is being blown!

If this solved your problem feel free to check any response as solution to close this request as solved

Happy New Year and Happy Coding