Produces literally the code on the page, instead of its execution

Question

There is a code:

jQuery('document').ready(function() { $("button").click(function() { if ($(".sent_1") == "right") { $(".sent_1").animate({ color: 'red' }); } if ($(".sent_2") == "wrong") { $(".sent_2").animate({ color: 'red' }); } if ($(".sent_3") == "wrong") { $(".sent_3").animate({ color: 'red' }); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> <script type="text/javascript" src="/jquery-3.0.0.min.js"></script> <script type="text/javascript" src="/textcolors.js"></script> <meta charset="utf-8" http-equiv="ContentType" content="text/html"> <title>Выполните задания</title> </head> <body> <form method="POST" action="textcolors.js"> <div class="exercise_sentences"> <label for='first' class="sent_1">first(+)</label> <input type="text" name="fi"> <label for='second' class="sent_2">second(-)</label> <input type="text" name="se"> <label for='third' class="sent_3">third(-)</label> <input type="text" name="th"> <input class="button" type="submit" name="check" value="Проверить"> </div> </form> </body> </html>

When I press a button, I want the text to glow green when the answer is correct and red when not answered correctly. When I press a button, it simply gives the text exactly the same as in textcolors.js, instead of performing it. (I connected jQuery by copy-paste in jquery-3.0.0.min.js according to the version.) At least I need to know what is wrong?

there is no other way how to make the text light green when the answer is correct and I don’t see red when it is not right.
($ (". sent_1") == "right") - if the word right is entered in the field, the text would be green.
and TPV tag form I write js because I want the button to execute the js code, which would highlight the data under certain conditions

Misha Saidov Misha Saidov 4,706 1 golden mark 4 silver marks 28 bronze marks · Accepted Answer · 2019-01-13T13:26:59

Here is an example of working code. The action does not write a link to the code that should be executed, but a link to the "server" file to which the data will be transmitted. This is usually a php file.

In the label tag in the for attribute, you need to specify a link to the input field id , i.e. they must match.

To find out the value of a field on jq, you need to use the val() method.

JQ will not animate non-numeric values. Write color: red incorrectly.

 jQuery('document').ready(function() { $("input[type='button']").click(function(e) { e.preventDefault(); if ($("input[name='first']").val() === "right") { $(".sent_1").css("color", "red"); } if ($("input[name='second']").val() === "wrong") { $(".sent_2").css("color", "red"); } if ($("input[name='third']").val() === "wrong") { $(".sent_3").css("color", "red"); } }); });

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <meta charset="utf-8" http-equiv="ContentType" content="text/html"> <title>Выполните задания</title> </head> <body> <form> <div class="exercise_sentences"> <label for='first' class="sent_1">first(+)</label> <input type="text" id="first" name="first"> <label for='second' class="sent_2">second(-)</label> <input type="text" id="second" name="second"> <label for='third' class="sent_3">third(-)</label> <input type="text" id="third" name="third"> <input class="button" type="button" name="check" value="Проверить"> </div> </form> </body> </html>

Den Kapone Den Kapone 49 6 bronze marks · Answer 2 · 2019-01-13T13:15:23

First, remove the JS file from the action form, in principle, the form is not needed, since you do not send data to the server. Secondly, you are accessing the class for the event of a click, you have missed a point before the button. Third, to get data from a form, you need to assign a class or id input from which you get the data and use $(".class").val() . Fourth, as far as I know there is an animate in JQ, there are plugins in the plugins, you can use the built-in css functions like $('.class').css({'border-color': 'red'});

You first said that the form is not needed, and then "to obtain data from the form"
In general - how to say html so that after pressing the button I addressed this .js file, if it is impossible through form action?
(I used to do this when connecting php, I thought so and js)

Produces literally the code on the page, instead of its execution

2 answers 2

More articles: