Справка по кнопке проверки Javascript

Привет, У меня возникли проблемы с частью кода, который я пишу. Код работает с первого раза, но затем перестает отвечать на запросы в одной части. Я пытаюсь добиться следующего...
Введите значение в поле ввода ставится галочка.
Снимите флажок. очищает значение в поле ввода
Установите флажок , устанавливает значение в поле ввода
Снимите флажок. очищает значение в поле ввода
Введите значение в поле ввода ставится галочка.
Снимите флажок. очищает значение в поле ввода
Установите флажок , устанавливает значение в поле ввода
Снимите флажок. очищает значение в поле ввода Но вот что происходит...
Введите значение в поле ввода ставится галочка. - работающий
Снимите флажок. очищает значение в поле ввода - работает
Установите флажок , устанавливает значение в поле ввода – работает
Снимите флажок. очищает значение в поле ввода - работает
Введите значение в поле ввода ставится галочка. - не работает
Установите флажок , устанавливает значение в поле ввода – работает
Снимите флажок. очищает значение в поле ввода - работает Я не могу понять, почему он перестает отвечать на запросы. Наверное, я что-то упускаю.

Любая помощь приветствуется.

 


<div class="fixed">


<ul>


<li class="list-item"> <input type="checkbox" name="cb" id ="cb"> </li>


<li class="list-item"> <label>Job#: </label><input type="number" name="jobNumber" id ="j" min = "1"></li>


</ul>


</div>


<script>


// looks for value in job# input


document.getElementById('j').addEventListener('change', recInput);


function recInput() {


// sets CB[0] to checked


document.getElementById('cb').setAttribute('checked', 'checked');


}


// looks for checkbox uncheck


var checkbox = document.getElementById('cb');


document.getElementById('cb').addEventListener('click', function() {


if (this.checked) {


document.getElementById('j').value="1";


// console.log("Checkbox is checked..");


} else {


//console.log("Clear J[0] input value here");


document.getElementById('j').value=null;


}


});


</script>

HTML:

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

ID, однако, не может. У нас также есть удобный небольшой набор данных, в который мы можем добавлять любую дополнительную информацию, которая нам нужна, и это значительно упрощает жизнь.

Мы знаем, что было выбрано или изменено, поэтому мы можем использовать «это», а затем, используя значение индекса, мы можем быстро перейти к другому элементу. var checkbox = document.getElementById('cb'+ this.dataset.idx); Новая скрипка в https://jsfiddle.net/itamer/hqsoz6d4/19/

 


<form id='frmFixed'>


<div class="fixed">


<ul>


<?PHP


for ($i = 0; $i <= $max; $i++){


echo "<li class='list-item'> <input type='checkbox' name='cb[{$i}]' id='cb{$i}' data-idx={$i}> </li>


<li class='list-item'> <label for='job{$i}'>Job#: </label><input type='number' name='jobNumber[{$i}]' id='job{$i}' min='1' data-idx={$i}></li>";


}?>


</ul>


</div>


</form>

HTML:

 // looks for value in job# input var frmFixed = document.getElementById('frmFixed'); function recInput(e) { console.log('input idx: ' + this.dataset.idx); var checkbox = document.getElementById('cb'+ this.dataset.idx); if (!checkbox.checked) { checkbox.click(); } } // looks for checkbox uncheck function recCheck(e) { console.log('checkbox idx: ' + this.dataset.idx); var job = document.getElementById('job' + this.dataset.idx); if (this.checked) { if (job.value === "") { job.value = "1"; } } else { job.value = ''; } } frmFixed.querySelectorAll('input[type=checkbox]').forEach(item => { item.addEventListener('click', recCheck); }); frmFixed.querySelectorAll('input[type=number]').forEach(item => { item.addEventListener('change', recInput); }); 

Код (JavaScript): HTML, вероятно, выглядит немного неуклюжим, но если вы используете PHP для создания формы, у вас может быть что-то вроде этого фрагмента, где $max — это количество строк, которое вы хотите.

 <form id='frmFixed'> <div class="fixed"> <ul> <li class="list-item"> <input type="checkbox" name="cb[1]" id="cb1" data-idx=1> </li> <li class="list-item"> <label for='job1'>Job#: </label><input type="number" name="jobNumber[1]" id="job1" min="1" data-idx=1></li> <li class="list-item"> <input type="checkbox" name="cb[2]" id="cb2" data-idx=2> </li> <li class="list-item"> <label for='job2'>Job#: </label><input type="number" name="jobNumber[2]" id="job2" min="1" data-idx=2></li> <li class="list-item"> <input type="checkbox" name="cb[3]" id="cb3" data-idx=3> </li> <li class="list-item"> <label for='job3'>Job#: </label><input type="number" name="jobNumber[3]" id="job3" min="1" data-idx=3></li> </ul> </div> </form> 

PHP:

значит, мы не собираемся стрелять в посланника, да?! У нас есть приводящая в бешенство ошибка, которая существует уже много лет. Видеть: https://bugzilla.mozilla.org/show_bug.cgi?id=327020

Посмотрите это в действии на https://jsfiddle.net/d5ncyjgo/

 var checkbox = document.getElementById('cb');


var job = document.getElementById('job');


// looks for value in job# input


function recInput(e) {


// sets CB[0] to checked


console.log('changed input value to '+this.value);


console.log('checkbox: ' + (checkbox.checked?'checked':'not'));


if (!checkbox.checked){


//[URL='https://lumtu.com/yti/MwccwMjBodHRwczovL2J1Z3ppbGxhLm1vemlsbGEub3JnL3Nob3dfYnVnLmNnaT9pZD0zMjz0D']https://bugzilla.mozilla.org/show_bug.cgi?id=327020[/URL]


//checkbox.setAttribute('checked', 'checked');


checkbox.click();


}


}


// looks for checkbox uncheck


function recCheck(e) {


console.log(this.checked);


console.log(job.value);


if (this.checked) {


if (job.value === "") {


job.value = "1";


}


// console.log("Checkbox is checked..");


} else {


//console.log("Clear J[0] input value here");


job.value = '';


}


}


job.addEventListener('change', recInput);


checkbox.addEventListener('click', recCheck);

Код (JavaScript):

Правда что. Могу ли я быть настолько смелым, чтобы удовлетворить мою просьбу? Если бы я хотел иметь несколько комбинаций «флажок/ввод», как лучше всего с ними справиться. Нужен ли мне отдельный сценарий для каждого?

попробуй это

 function recInput(e) {

console.log('input idx: ' + e.target.dataset.idx);

var checkbox = document.getElementById('cb' + e.target.dataset.idx);

if (!checkbox.checked) {

checkbox.click();

}
}

Код (JavaScript):

ок, пробежимся по этому поводу Некоторые мелочи Этот код закрывает div и исключает ввод — переместите в конец строки

 // Add item


function addItem(e) {


e.preventDefault();


// itemList is the list div, not the item div


itemList.dataset.idx++;


var idx = itemList.dataset.idx;


// Create new div for row


var rowDiv = document.createElement("div");


rowDiv.id = "items" + idx;


rowDiv.className = "container-2";


// add the new div into the DOM


itemList.appendChild(rowDiv);

PHP: не делайте две формы, поместите кнопку добавления в основную форму.

 <div id="list"> <div id='items1' class='container-2'>

HTML: Это может быть придирчиво и старомодно, но не используйте зарезервированные слова в своем коде.

Вместо формы var используйте var frmFixed, var frm или другое подходящее сокращение.

 var form = document.getElementById('addForm');

Код (JavaScript): вы можете переместить свой индексный номер на любой из них в зависимости от того, как вы собираетесь его использовать.

«список» будет содержать только общее количество, «элементы» будут иметь порядковый номер.

Я также присвоил «предметам» номер, чтобы идентификатор был уникальным.

 <form id="addForm" > <input type="submit" value="Add"> </form>

HTML: я изменил начало вашего javascript, и у меня работает скрипка, но она не проверена и неполная, у меня нет времени, извините: https://jsfiddle.net/itamer/hqsoz6d4/37/

 <div class='box-3'><label for='part{$i}'>$Part[$i]</label> </div> <input name='part[{$i}]' type='hidden' value='$Part[$i]'>

Код (JavaScript):

Привет Сара, Итак, я использовал вашу скрипку, а затем создал свою собственную.
https://jsfiddle.net/jon30442/m4qj1c6y/26/

У меня все работает, за исключением нескольких проблем.

Все идентификаторы div создаются с уникальными идентификаторами, устанавливаются все атрибуты входных данных.

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

Когда добавляю строку - работает.

Если я добавлю некоторые данные на входы, а затем сниму флажок, строка должна быть очищена - не работает, похоже, что adventlistener для их очистки не работает с добавленными строками.

Кнопка удаления работает так же, как кнопка добавления, но выдает ошибку, что невозможно удалить дочерний элемент.

Кнопка «Отправить список» используется для отправки списка деталей в следующий PHP-файл для обработки данных.

Это работает, я только что удалил ссылку. Я уверен, что это что-то простое, что я упустил из виду.

Могу ли я попросить вас просмотреть это для меня, пожалуйста.

Я пишу это по ходу дела, поэтому может быть немного бессвязно. ссылка: https://jsfiddle.net/itamer/L7241jbg/14/

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

 //so this:
input.id = "job: " + idx;

//should be this:
input.id = "job" + idx;

Код (JavaScript): Я почти уверен, что это угасание мозга, когда вы слишком долго смотрите на свой собственный код.

  // your code // the quote marks around "idx" give the index a string rather than the value of the variable input.idx = "idx"; // this works input.dataset.idx = idx;

Код (JavaScript): и с этими небольшими изменениями ваш код готов к работе! и последнее небольшое замечание не путайте измерения размеров.

Вам следует использовать em или, возможно, px, но определенно не pt. Выберите один и придерживайтесь его.

Спасибо. Я нашел это (думаю, вы ответили предложением), которое, я думаю, натолкнуло меня на идею, но я был рад рассмотреть множество способов сделать что-то. Вот как мы учимся...
https://forums.digitalpoint.com/threads/trying-to-use-same-javascript-multiple-times-on-same-page.2865083/

Забыл упомянуть, что я добавил слушателей в новый элемент, они не добавляются автоматически. Ваша кнопка «Добавить» технически была кнопкой «Отправить», я изменил ее на стандартную кнопку — и я сделал то же самое для кнопки «Удалить» — и присвоил ей индекс.

 // Remove item
function removeItem(e) {

let idx = e.target.dataset.idx;

let del = document.getElementById("items" + idx);

itemList.removeChild(del);
}

Код (JavaScript): поскольку я поместил прослушиватель событий удаления на фактическую кнопку удаления, код RemoveItem теперь может выглядеть следующим образом:

 deleteBtn.type = 'button';

Код (JavaScript): ссылка: https://jsfiddle.net/itamer/L7241jbg/33/

Большое спасибо. Я рвал на себе те немногие волосы, которые у меня остались, пытаясь понять, почему это не работает. Мы очень ценим ваши усилия по щекотке/переписыванию кода для неопытных программистов.

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

Кнопка «Удалить» работает как закрытие кнопки «Добавить» и возвращает результат.

• «322:14
  
  Uncaught NotFoundError: не удалось выполнить команду «removeChild» на «Node»: удаляемый узел не является дочерним по отношению к этому узлу. ."
  

в консоли.