Капча на js

@amelipoule · Регистрация: 03.11.2021

Студворк — интернет-сервис помощи студентам

Здравствуйте, у меня задание создать капчу на джаваскрипт , примитивную, сложение чисел.
Проблема в том на странице не отображается математическое выражение со сложением
Вот код HTML

HTML5
1
2
3
4
5
<body onload="captcha()"> 
<p id="text"></p>
<input type="text" id="captchaEdit" value="" />
<input type="submit" value="Отправить" onClick="checkCaptcha();" />
</body>

JS

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var a = Math.ceil(Math.random()*10);
var b= Math.ceil(Math.random()*10);
var c = a+b;
 
function captcha(){
    document.getElementById('text').innerHTML='<div class="capcha">' + a + b+'</div>';// видимо  именно эта запись не срабатывает, почему я не знаю.
}
 
function checkCaptcha(){
    var d = document.getElementById('captchaEdit').value;
    
    if(d == c) {
        alert('Правильный ответ!');
    }
    else {
        alert('Неправильный ответ')
    }
}

Я пересмотрела кучу кодом, не получается. Помогите , очень прошу.

Добавлено через 7 минут
я вынесла капчу из основной функции в отдельный файл, и она заработала, правда кривовато , слепливает цифры. Это я буду искать.
Но как же тогда прикрутить ее вовнутрь.
Вот код проверки формы
Я не надеюсь, что кто-то что-то сделает за меня. но если вы мне скажите пару толковых слов и укажите мне мой косяк, которые сохранят мне время, я буду вам сильно признательна, прямо очень!!!

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
function validate(){ 
   var $name = document.querySelector('.nomprenom').value;    
   var $telephone=document.querySelector('.telephone').value;
   var $objetdumessage=document.querySelector('#objetdumessage').value;   
   var $message=document.querySelector('.textemessage').value;
   var $email=document.querySelector('.email').value;
  
   
   
   var $reg_name=/^[a-zA-Z\s\-\_]+$/; /* des lettres */ 
   var $reg_telephone=/^\d[\d\(\)\ -]{4,14}\d$/; /* Modèle de numéro de téléphone */
   var $reg_email=/^[\w-\.]+@[\w-]+\.[a-z]{2,4}$/i; /* Modèle de numéro de email */
   var $reg_message=/^[a-zA-Z\s\-\_]+$/;/* Modèle de numéro de message */
   
 
    
     if ($name.length==0){
      
      var a=document.querySelector('.nomprenom');
      a.innerHTML="ce champ est obligatoire pour remplissage";
      return false;
     }
     else { 
     /* Champ Nom : transformation en majuscules avant validation du formulaire   */
     var $a=String(document.querySelector('.nomprenom').value);
     $name =$a.toUpperCase();
         
     }
 
  
     if(!$name.match($reg_name)){alert("Le nom n'est pas correct! Pas bon !"); 
     
     /* $name.focus(); */
     return false;
     }
   
   
     if ($telephone.length==0){
       
      alert("Vous avez entré un telephone invalide !");
      return false;
    }
    else if( !$telephone.match($reg_telephone)){alert("Le telephone n'est pas correct!Pas bon !");
    
    /* $telefon.focus(); */ 
    return false;}
   
 
   if ($email.length==0){
      alert("Vous avez entré une email invalide !");
      /* $email.focus(); */
      return false;
   }
    if(!$email.match($reg_email)){alert("Le email n'est pas correct!Pas bon !");
    /* $email.focus(); */
    return false; }
   
   
   
   
     
   if ($message.length==0){
      alert("Vous avez entré un message invalide !");
     /* $message.focus(); */
     return false;
     
   }
   else if( !$message.match($reg_message)){
   alert("Le message n'est pas correct! Pas bon !");
   /* $message.focus(); */
   return false; 
   
   }
  var a = Math.ceil(Math.random()*10);
var b= Math.ceil(Math.random()*10);
var c = a+b;
 
   function captcha(){
    document.getElementById('text').innerHTML='<div class="capcha">' + a + b +'</div>';
    }
 
    function checkCaptcha(){
    var d = document.getElementById('captchaEdit').value;
    
    if(d == c) {
        alert('Правильный ответ!');
    }
    else {
        alert('Неправильный ответ, попробуйте еще раз.')
       }
     }
 
   return true;
}

@DrType · 03.01.2022, 00:04

Я бы переписал функцию checkCaptcha так, чтобы она возвращала d == c. Тогда в функцию валидации формы добавляете

JavaScript
1
2
3
4
if (!checkCaptcha()){
     /* document.getElementById('captchaEdit').focus(); */
     return false;     
}

@amelipoule · 03.01.2022, 15:18 **[ТС]**

Спасибо большое, вроде бы все заработало, только лепит цифры один к другой, прямо настойчиво, перепробовала все кавычки и без. Все равно лепит.

JavaScript
1
2
3
4
document.getElementById('text').innerHTML='<div class="capcha">' + a + "+" +  b +" = "+'</div>';
document.getElementById('text').innerHTML='<div class="capcha">' + a + '+' +  b +'= '+'</div>';
 
document.getElementById('text').innerHTML='<div class="capcha">' + a +  b + '</div>';

Помогите еще раз пожалуйста
В гугле кидает куда хочешь но не по теме, или же такие же записи.
Спасибо еще раз

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var a = Math.ceil(Math.random()*10);
var b= Math.ceil(Math.random()*10);
var c = a+b;
 
function captcha(){
    document.getElementById('text').innerHTML='<div class="capcha">' + a + "+" +  b +" = "+'</div>';
}
  var d = document.getElementById('captchaEdit').value;
function checkCaptcha(){
   
    
    if(d == c) {
        alert('Bonne!');
        return true;
    }
    else {
        alert('Pas bonne!');
        document.getElementById('captchaEdit').focus(); 
        return false;   
    }
}

@DrType · 03.01.2022, 17:44

JavaScript
1
document.getElementById('text').innerHTML = `<div class="capcha">${a} + ${b} = </div>`;

@amelipoule · 03.01.2022, 22:09 **[ТС]**

ВЫ ГЕНИЙ

БОЛЬШОЕ СПАСИБО

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@amelipoule 1 / 1 / 0 Регистрация: 03.11.2021 Сообщений: 38
	03.01.2022, 22:09 [ТС]
	ВЫ ГЕНИЙ БОЛЬШОЕ СПАСИБО 0

Капча на js

Решение