Увеличение переменных приращений на единицу

Идея состоит в том, чтобы иметь изображение, которое, когда я нажимаю на него, увеличивает число под ним на единицу. Ниже я опубликую копию своего HTML и JavaScript.

ЯВАСКРИПТ

 function increasedigit(digitnumber) {
 var x = document.getElementById(digitnumber).innerHTML;
 if (x > 9) {
 x++;
 }
 else
 {
 x == 0;
 }
 document.getElementById.innerHTML = x;
}

HTML
<div class="two">
<img onclick="increasedigit(digitone)" class="arrowgeneral" src="[URL='https://lumtu.com/yti/bAnnAbmdodHRwczovL2ltYWdlLmZsYXRpY29uLmNvbS9pY29ucy9wbmcvNTEyLzM2LzM2OTA1LATO']https://image.flaticon.com/icons/png/512/36/36905.png"/[/URL]>
<p class="digit" id="digitone">0</p>
<img class="arrowgeneral arrowdown" src="[URL='https://lumtu.com/yti/bAnnAbmdodHRwczovL2ltYWdlLmZsYXRpY29uLmNvbS9pY29ucy9wbmcvNTEyLzM2LzM2OTA1LATO']https://image.flaticon.com/icons/png/512/36/36905.png"/[/URL]>
</div>

Код (JavaScript):

Я начинаю с упаковки сценария в IIFE, чтобы не расширять возможности других сценариев. Я помещаю все элементы, с которыми мы хотим работать, в переменные, чтобы мы не тратили время на выполнение «getElementBy» или «querySelector» внутри каких-либо циклов или событий. (это медленные операции). Обратите внимание: чокнутые «функциональное программирование» потеряют раздражительность и будут кричать: «Но этот snyde fx»… черт возьми! Они выговаривают свои задницы!
makeDigitalControl делает наши пуговицы.

Считайте это прямым шаблоном DOM.

Создавая элементы в DOM, мы обходим «парсер» браузера, заставляя все это выполняться во много, МНОГО раз быстрее, чем это сделал бы внутренний HTML.

создайте кнопку, примените наш обработчик кликов, дайте ей текст содержимого, дайте ей заголовок и вставьте его в разметку рядом с вводом, если это необходимо. Использование свойства элемента onclick обычно так же запрещено, как и атрибут onclick.

Обычно предпочтительным методом является addEventListener, чтобы любые другие события не были искажены.

Дело в том, что мы буквально только что создали элемент, поэтому других обработчиков нет, поэтому мы могли бы проскользнуть мимо.
цифраминус и цифраПлюс могут работать без идентификаторов, getElements/querySelector или любой другой чепухи, потому что они являются событиями.

Event.currentTarget — это кнопка, на которую вы нажали.

Из-за того, как мы вставляем их до и после ввода, все, что нам нужно сделать, это найти nextElementSibling или previousElementSibling, чтобы получить его! Это называется «прогулка по DOM», и это значительно упрощает выполнение этой задачи.

Вы также можете видеть, что я значительно упростил математическую логику.

Префиксные операции возвращают свое значение, поэтому вы можете просто сравнивать и действовать соответствующим образом при OOR.

(вне диапазона) После наших функций (я предпочитаю сначала перечислять функции) мы просматриваем все входные данные в наборе полей и создаем элементы управления.

Для простоты я использовал треугольники UTF-8. Если бы я использовал шевроны, я бы использовал что-то вроде потрясающего шрифта вместо нескольких статических изображений, поскольку это требует меньше рукопожатий и намного лучше масштабирует размер.

Наконец, я использую addEventListener, чтобы подключить кнопку.

Логика расчета хороша, поскольку она не требует создания каких-либо дополнительных «переменных просто так», работа непосредственно с различными .value по умолчанию блокирует нас в строковом поведении.

Просто очистите его, а затем добавьте значения каждого входа. Приятная особенность заключается в том, что не имеет значения, сколько входных данных имеется, вы можете добавлять или удалять их в разметке по своему желанию, и она с этим справится.

Ни одна из целей не является жестко запрограммированной. Живая демонстрация здесь, в моем стандартном «стартовом» стиле:
https://cutcodedown.com/for_others/EscapeartistAZ/testCombo.html

Каталог:
https://cutcodedown.com/for_others/EscapeartistAZ/

Разблокирован для облегчения доступа к липким кусочкам и кусочкам, и я добавил туда RAR-файл, чтобы вы могли получить все это за один раз. Это поможет?

На самом деле это не форма и не отправка.

кнопка отправки просто объединяет 4 числа в одну переменную.

Затем мне нужно создать еще одну функцию, которая будет проверять правильность кода.

Если код правильный, он будет что-то делать, например, отображать текст или менять цвет чего-либо, если код неправильный, то он либо ничего не сделает, либо всплывет неправильно.

Этот сценарий

 function combinecode() {
var a = document.getElementById('digitone').innerHTML;
var b = document.getElementById('digittwo').innerHTML;
var c = document.getElementById('digitthree').innerHTML;
var d = document.getElementById('digitfour').innerHTML;
var combo = a.concat(b,c,d);
document.getElementById('completeanswer').innerHTML = combo;
}

Код (JavaScript): должен выглядеть так

 function combinecode() { var a = document.getElementById(digitone).innerHTML; var b = document.getElementById(digittwo).innerHTML; var c = document.getElementById(digitthree).innerHTML; var d = document.getElementById(digitfour).innerHTML; var combo = a.concat(b,c,d); document.getElementById(completeanswer).innerHTML = combo; }

Код (JavaScript):

Хорошо, у меня цифры работают, но теперь моя кнопка «Отправить» не работает. Я опубликую полный код. Дайте мне знать, если вы можете узнать, почему, пожалуйста.

 <!DOCTYPE html>

<html>

<head>
<title>Document</title>
<link rel="stylesheet" href="testcomboonecss.css">
<script>function increasedigit(digitnumber) {
 var x = document.getElementById(digitnumber).innerHTML;
 if (x < 9) {
 x++;
 }
 else
 {
 x = 0;
 }
 document.getElementById(digitnumber).innerHTML = x;
}

function decreasedigit(digitnumber) {
 var x = document.getElementById(digitnumber).innerHTML;
 if (x > 0) {
 x--;
 }
 else
 {
 x = 9;
 }
 document.getElementById(digitnumber).innerHTML = x;
}

function combinecode() {
 var a = document.getElementById(digitone).innerHTML;
 var b = document.getElementById(digittwo).innerHTML;
 var c = document.getElementById(digitthree).innerHTML;
 var d = document.getElementById(digitfour).innerHTML;
 var combo = a.concat(b,c,d);
 document.getElementById(completeanswer).innerHTML = combo;
}</script>
</head>

<body>

<div id="header">
<img src="[URL='https://lumtu.com/yti/LolloLUxodHRwczovL2xoMy5nb29nbGV1c2VyY29udGVudC5jb20vcHJveHkvVUx4UFp3blUzeHFYYkFkamd2X2hvMG9RU3F1SUROQzJhUXdYTXVyMlJGaGJmQjh4bHNYaHhSdktGdU4yY01DVnJwd3lKb3pyNlVKUkVBeGg2VnF5X1JIMEVGVURSMi1YUGNSVFB1MWxFRXIyX0JtV3R0eWR3VXlDSlXV']https://lh3.googleusercontent.com/proxy/ULxPZwnU3xqXbAdjgv_ho0oQSquIDNC2aQwXMur2RFhbfB8xlsXhxRvKFuN2cMCVrpwyJozr6UJREAxh6Vqy_RH0EFUDR2-XPcRTPu1lEEr2_BmWttydwUyCJZ-L"/[/URL]>
</div>

<div id="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>

<div id="content">

<div class="one">

<div class="four">
<p>Enter you answer below then click submit to check if you are correct or not</p>
</div>

<div class="two">
<img class="arrowgeneral" src="[URL='https://lumtu.com/yti/bAnnAbmdodHRwczovL2ltYWdlLmZsYXRpY29uLmNvbS9pY29ucy9wbmcvNTEyLzM2LzM2OTA1LATO']https://image.flaticon.com/icons/png/512/36/36905.png[/URL]" onclick="increasedigit('digitone')"/>
<p class="digit" id="digitone">0</p>
<img class="arrowgeneral arrowdown" src="[URL='https://lumtu.com/yti/bAnnAbmdodHRwczovL2ltYWdlLmZsYXRpY29uLmNvbS9pY29ucy9wbmcvNTEyLzM2LzM2OTA1LATO']https://image.flaticon.com/icons/png/512/36/36905.png[/URL]" onclick="decreasedigit('digitone')"/>
</div>

<div class="two">
<img class="arrowgeneral" src="[URL='https://lumtu.com/yti/bAnnAbmdodHRwczovL2ltYWdlLmZsYXRpY29uLmNvbS9pY29ucy9wbmcvNTEyLzM2LzM2OTA1LATO']https://image.flaticon.com/icons/png/512/36/36905.png[/URL]" onclick="increasedigit('digittwo')"/>
<p class="digit" id="digittwo">0</p>
<img class="arrowgeneral arrowdown" src="[URL='https://lumtu.com/yti/bAnnAbmdodHRwczovL2ltYWdlLmZsYXRpY29uLmNvbS9pY29ucy9wbmcvNTEyLzM2LzM2OTA1LATO']https://image.flaticon.com/icons/png/512/36/36905.png[/URL]" onclick="decreasedigit('digittwo')"/>
</div>

<div class="two">
<img class="arrowgeneral" src="[URL='https://lumtu.com/yti/bAnnAbmdodHRwczovL2ltYWdlLmZsYXRpY29uLmNvbS9pY29ucy9wbmcvNTEyLzM2LzM2OTA1LATO']https://image.flaticon.com/icons/png/512/36/36905.png[/URL]" onclick="increasedigit('digitthree')"/>
<p class="digit" id="digitthree">0</p>
<img class="arrowgeneral arrowdown" src="[URL='https://lumtu.com/yti/bAnnAbmdodHRwczovL2ltYWdlLmZsYXRpY29uLmNvbS9pY29ucy9wbmcvNTEyLzM2LzM2OTA1LATO']https://image.flaticon.com/icons/png/512/36/36905.png[/URL]" onclick="decreasedigit('digitthree')"/>
</div>

<div class="two">
<img class="arrowgeneral" src="[URL='https://lumtu.com/yti/bAnnAbmdodHRwczovL2ltYWdlLmZsYXRpY29uLmNvbS9pY29ucy9wbmcvNTEyLzM2LzM2OTA1LATO']https://image.flaticon.com/icons/png/512/36/36905.png[/URL]" onclick="increasedigit('digitfour')"/>
<p class="digit" id="digitfour">0</p>
<img class="arrowgeneral arrowdown" src="[URL='https://lumtu.com/yti/bAnnAbmdodHRwczovL2ltYWdlLmZsYXRpY29uLmNvbS9pY29ucy9wbmcvNTEyLzM2LzM2OTA1LATO']https://image.flaticon.com/icons/png/512/36/36905.png[/URL]" onclick="decreasedigit('digitfour')"/>
</div>

<div class="three">
<img id="submit" src="[URL='https://lumtu.com/yti/bAnnAbmdodHRwczovL2ZyZWVpY29uc3BuZy5jb20vdXBsb2Fkcy9zdWJtaXQtYnV0dG9uLXBuZy05L0yZ']https://www.freeiconspng.com/uploads/submit-button-png-9.png[/URL]" onclick="combinecode()"/>
</div>
<p id="completeanswer">hello</p>

</div>

</div>

</body>

</html>

HTML:

Формы нет, и изображение не знает, что оно предназначено для кнопки отправки. Правильная разметка должна выглядеть примерно так:

 <form action="/action_page.php">
 <label for="digit">Digit:</label>
 <input type="text" id="digit" name="digit" value="0"><br>
 <input type="image" src="submit.gif" alt="Представлять на рассмотрение" width="48" height="48">
</form>

HTML: