Home>

The code that moved successfully until yesterday has disappeared this morning.
Selecting with SELECT changes the button value and then javascript itself is working properly as it will be displayed when you put console.log or the like.
However, the last row of the JS file does not work only.
It is true that the click event is not moving because the Click event is not displayed even if you put console.log in the click event.
When I moved yesterday, I moved when I put it in the form, but when I clicked the button after several hours $ ("# sm"). HTML ("Determination"); Form to move the same as HTML ("decision"); It was out of it, but it was no good.
What should I do?
I want to borrow everyone's wisdom.

$ ("# sm"). HTML ("decision");
→ Click to fly to another page

Click Event
→ Click Change Change_TagLine, and change the button text randomly from the TagLines array

FORTUNE.EJS

<
HTML >
  ≪
HEAD >
    ≪
META CHARSET= "UTF8" >
    ≪
script src= "https://code.jquery.com/jquery-3.5.1.min.js" >
≪
/Script >
    ≪
script type= "text /javascript" src= "siRen.js" >
≪
/Script >
    ≪
Link Rel= "Stylesheet" HREF= "STYLE.CSS" TYPE= "TEXT /CSS" >
    ≪
Title >
Siren horoscope <
/Title >
    ≪
Meta Name= "Viewport" Content= "Width= Device-Width, Initial-Scale= 1.0, Maximum-Scale= 1.0, minimum-scale= 1.0" >
  ≪
/HEAD >
  ≪
BODY >
      ≪
DIV ID= "CONTENTS" >
      ≪
H3 >
Siren Divination page. ≪
/H3 >
    ≪
P >
Choose a series <
/P >
    ≪
Form Action= "/Result" Method= "Post" ID= "Form" >
      ≪
SELECT ID= "SELECT_SERIES" NAME= "selected_Series" >
        ≪
Option Value= "NONE" NAME= "Series" >
-Please select-<
/option >
        ≪
Option Value= "One" name= "Series" >
Siren <
/option >
        ≪
Option Value= "Two" name= "Series" >
Siren2 <
/option >
        ≪
Option Value= "NT" Name= "Series" >
Siren: NT <
/option >
        ≪
Option Value= "all" name= "Series" >
All series <
/option >
      ≪
/SELECT >
      ≪
P >
≪
INPUT TYPE= "NUMBER" MIN= "1" MAX= "5" VALUE= "1" NAME= "TIMES" ID= "Number" >
Run <
/P >
      ≪
DIV ID= "SM" >
≪
/DIV >
    ≪
/Form >
    ≪
DIV ID= "Tagline" >
≪
/DIV >
    ≪
a HREF= "/TOP" >
Return to TOP <
/A >
    ≪
/DIV >
  ≪
/Body >
≪
/HTML >

Siren.js

$ (FUNCTION () {
    CONST TAGLINES= ["Hopelessness, despair", "There is no escape", "Even if you breathe, fear";
    //If SELECT changes, the character of the button also changes
    $ ("# SELECT_SERIES"). Change (FUNCTION () {
        Let Select= $ ("# select_series"). Val ();
        SWITCH (SELECT) {
            CASE "ONE":
                $ ("# Sm"). HTML ("<
Button Type= 'Submit' ID= 'Select' >
Decision <
/Button >
");
                $ ("# Select"). Text ("all ... will be erased!");
                $ ("# Tagline"). HTML ("");
                Break;
            CASE "Two":
                 $ ("# Sm"). HTML ("<
Button Type= 'Submit' ID= 'Select' >
Decision <
/Button >
");
                $ ("# Select"). Text ("I will show you a god-style!"
                $ ("# Tagline"). HTML ("");
                Break;
            CASE "NT":
                 $ ("# Sm"). HTML ("<
Button Type= 'Submit' ID= 'Select' >
Decision <
/Button >
");
                $ ("# Select"). Text ("Go to Hell!");
                $ ("# Tagline"). HTML ("");
                Break;
            CASE "ALL":
                 $ ("# Sm"). HTML ("<
Button Type= 'Submit' ID= 'Select' >
Decision <
/Button >
");CHANGE_TAGLINE (); $ ("# tagline"). HTML ("<
Button ID= 'Change' >
Change <
/Button >
");
               Break;
            DEFAULT:
                $ ("# Sm"). HTML ("");
                $ ("# Tagline"). HTML ("");
        }
    }))
    //Convert button character to catch copy of button randomly when selecting full series
    FUNCTION CHANGE_TAGLINE () {
        $ ("# Select"). Text (TagLines [Math.floROR (Math.random () * TAGLINES.LENGTH)]);
    }
    $ ("# CHANGE"). Click (Function () {
        CHANGE_TAGLINE ();
    }))
}))
  • Answer # 1

    Click ()Provides a mechanism to detect a click event for the DOM that exists on that page.
    If you want to add a dynamically added element, you need to grant a click event each time you add it.

    To solve it ON ()There is a mechanism to detect a click event for the parent element using what is called, and there is a mechanism to perform processing if it is the corresponding element.

    $ (FUNCTION () {
        CONST TAGLINES= ["Hopelessness, despair", "There is no escape", "Even if you breathe, fear";
        //If SELECT changes, the character of the button also changes
        $ ("# SELECT_SERIES"). Change (FUNCTION () {
            Let Select= $ ("# select_series"). Val ();
            SWITCH (SELECT) {
                CASE "ONE":
                    $ ("# Sm"). HTML ("<
    Button Type= 'Submit' ID= 'Select' >
    Decision <
    /Button >
    ");
                    $ ("# Select"). Text ("all ... will be erased!");
                    $ ("# Tagline"). HTML ("");
                    Break;
                CASE "Two":
                     $ ("# Sm"). HTML ("<
    Button Type= 'Submit' ID= 'Select' >
    Decision <
    /Button >
    ");
                    $ ("# Select"). Text ("I will show you a god-style!"
                    $ ("# Tagline"). HTML ("");
                    Break;
                CASE "NT":
                     $ ("# Sm"). HTML ("<
    Button Type= 'Submit' ID= 'Select' >
    Decision <
    /Button >
    ");
                    $ ("# Select"). Text ("Go to Hell!");
                    $ ("# Tagline"). HTML ("");
                    Break;
                CASE "ALL":
                     $ ("# Sm"). HTML ("<
    Button Type= 'Submit' ID= 'Select' >
    Decision <
    /Button >
    ");
                    CHANGE_TAGLINE ();
                    $ ("# Tagline"). HTML ("<
    Button ID= 'Change' >
    Change <
    /Button >
    ");
                   Break;
                DEFAULT:
                    $ ("# Sm"). HTML ("");
                    $ ("# Tagline"). HTML ("");
            }
        }))
        //Convert button character to catch copy of button randomly when selecting full series
        FUNCTION CHANGE_TAGLINE () {
            $ ("# Select"). Text (TagLines [Math.floROR (Math.random () * TAGLINES.LENGTH)]);
        }
        $ ("# Tagline"). On ("click", "#change", Function () {
            CHANGE_TAGLINE ();
        }))
    })); 
    
    <
    script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
    ≪
    /Script >
    ≪
    DIV ID= "CONTENTS" >
          ≪
    H3 >
    Siren Divination page. ≪
    /H3 >
        ≪
    P >
    Choose a series <
    /P >
        ≪
    Form Action= "/Result" Method= "Post" ID= "Form" >
          ≪
    SELECT ID= "SELECT_SERIES" NAME= "selected_Series" >
            ≪
    Option Value= "NONE" NAME= "Series" >
    -Please select-<
    /option >
            ≪
    Option Value= "One" name= "Series" >
    Siren <
    /option >
            ≪
    Option Value= "Two" name= "Series" >
    Siren2 <
    /option >
            ≪
    Option Value= "NT" Name= "Series" >
    Siren: NT <
    /option >
            ≪
    Option Value= "all" name= "Series" >
    All series <
    /option >
          ≪
    /SELECT >
          ≪
    P >
    ≪
    INPUT TYPE= "NUMBER" MIN= "1" MAX= "5" VALUE= "1" NAME= "TIMES" ID= "Number" >
    Run <
    /P >
          ≪
    DIV ID= "SM" >
    ≪
    /DIV >
        ≪
    /Form >
        ≪
    DIV ID= "Tagline" >
    ≪
    /DIV >
        ≪
    a HREF= "/TOP" >
    Return to TOP <
    /A >
        ≪
    /DIV >
    
    

    By the way, it does not mean that it has been moving properly until yesterday, and it does not change suddenly from today, and it will not change over time if it is the same source code.
    It is probably guessed that you have never moved something if you have added a button dynamically or changing the event settings.
    It makes it easy to track the cause by understanding what you have changed.
    When asking questions, it would be better to write what you changed.

    Thank you! I solved it safely!

    ポルポラ2021-06-30 13:53:57
  • Answer # 2

    Click ()Provides a mechanism to detect a click event for the DOM that exists on that page.
    If you want to add a dynamically added element, you need to grant a click event each time you add it.

    To solve it ON ()There is a mechanism to detect a click event for the parent element using what is called, and there is a mechanism to perform processing if it is the corresponding element.

    $ (FUNCTION () {
        CONST TAGLINES= ["Hopelessness, despair", "There is no escape", "Even if you breathe, fear";
        //If SELECT changes, the character of the button also changes
        $ ("# SELECT_SERIES"). Change (FUNCTION () {
            Let Select= $ ("# select_series"). Val ();
            SWITCH (SELECT) {
                CASE "ONE":
                    $ ("# Sm"). HTML ("<
    Button Type= 'Submit' ID= 'Select' >
    Decision <
    /Button >
    ");
                    $ ("# Select"). Text ("all ... will be erased!");
                    $ ("# Tagline"). HTML ("");
                    Break;
                CASE "Two":
                     $ ("# Sm"). HTML ("<
    Button Type= 'Submit' ID= 'Select' >
    Decision <
    /Button >
    ");
                    $ ("# Select"). Text ("I will show you a god-style!"
                    $ ("# Tagline"). HTML ("");
                    Break;
                CASE "NT":
                     $ ("# Sm"). HTML ("<
    Button Type= 'Submit' ID= 'Select' >
    Decision <
    /Button >
    ");
                    $ ("# Select"). Text ("Go to Hell!");
                    $ ("# Tagline"). HTML ("");
                    Break;
                CASE "ALL":
                     $ ("# Sm"). HTML ("<
    Button Type= 'Submit' ID= 'Select' >
    Decision <
    /Button >
    ");
                    CHANGE_TAGLINE ();
                    $ ("# Tagline"). HTML ("<
    Button ID= 'Change' >
    Change <
    /Button >
    ");
                   Break;
                DEFAULT:
                    $ ("# Sm"). HTML ("");
                    $ ("# Tagline"). HTML ("");
            }
        }))
        //Convert button character to catch copy of button randomly when selecting full series
        FUNCTION CHANGE_TAGLINE () {
            $ ("# Select"). Text (TagLines [Math.floROR (Math.random () * TAGLINES.LENGTH)]);
        }
        $ ("# Tagline"). On ("click", "#change", Function () {
            CHANGE_TAGLINE ();
        }))
    })); 
    
    <
    script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
    ≪
    /Script >
    ≪
    DIV ID= "CONTENTS" >
          ≪
    H3 >
    Siren Divination page. ≪
    /H3 >
        ≪
    P >
    Choose a series <
    /P >
        ≪
    Form Action= "/Result" Method= "Post" ID= "Form" >
          ≪
    SELECT ID= "SELECT_SERIES" NAME= "selected_Series" >
            ≪
    Option Value= "NONE" NAME= "Series" >
    -Please select-<
    /option >
            ≪
    Option Value= "One" name= "Series" >
    Siren <
    /option >
            ≪
    Option Value= "Two" name= "Series" >
    Siren2 <
    /option >
            ≪
    Option Value= "NT" Name= "Series" >
    Siren: NT <
    /option >
            ≪
    Option Value= "all" name= "Series" >
    All series <
    /option >
          ≪
    /SELECT >
          ≪
    P >
    ≪
    INPUT TYPE= "NUMBER" MIN= "1" MAX= "5" VALUE= "1" NAME= "TIMES" ID= "Number" >
    Run <
    /P >
          ≪
    DIV ID= "SM" >
    ≪
    /DIV >
        ≪
    /Form >
        ≪
    DIV ID= "Tagline" >
    ≪
    /DIV >
        ≪
    a HREF= "/TOP" >
    Return to TOP <
    /A >
        ≪
    /DIV >
    
    

    By the way, it does not mean that it has been moving properly until yesterday, and it does not change suddenly from today, and it will not change over time if it is the same source code.
    It is probably guessed that you have never moved something if you have added a button dynamically or changing the event settings.
    It makes it easy to track the cause by understanding what you have changed.
    When asking questions, it would be better to write what you changed.

    Thank you! I solved it safely!

    ポルポラ2021-06-30 13:53:57