Блог

Главная - Вопросы по программированию - как установить значение для конкретного объекта объекта массива в javasript

как установить значение для конкретного объекта объекта массива в javasript

#javascript #php #html #jquery

#javascript #php #HTML #jquery

Вопрос:

Я должен написать inputbox внутри оператора цикла. допустим, у меня есть цикл 3 раза

 <?php
    for($i = 0; i<3;i  ){
?>
      <input type="number" id="numb" onkeyup="getvalue(this.value)"/>
      <span id="result"></result>
<?php
    }
?>

<script>
function getvalue(val){
        var res= parseInt(val)*10;
        if(isNaN(res) == true){
            res = 0;
        }
        document.getElementById('result').value = res;

}
</script>

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

Комментарии:

1. Атрибуты ID ДОЛЖНЫ быть уникальными. Вы объявляете один и тот же идентификатор несколько раз и надеетесь, что функция будет знать, на какой элемент ссылается при использовании document.getElementById — этого не произойдет!

2. Какой объект? Какой массив объекта?

3. В for цикле все i переменные должны начинаться с $ : for($i = 0; $i < 3; $i ){

Ответ №1:

Вы можете получить доступ к вводимым пользователем данным, получая объект события и его целевое свойство. Это event.target (входной элемент) имеет свойство, называемое nextElementSibling.

Используйте nextElementSibling для доступа к следующему элементу после ввода, который здесь является span.

Нет необходимости использовать идентификатор или другие методы

Измените входной элемент на:

 <input type="number" class="numb" onkeyup="getvalue(event)"/>

Измените содержимое тега скрипта на:

 function getvalue(event) {
  var input = event.target;
  var val = input.value;
  var res = parseInt(val) * 10;
  if (isNaN(res) == true) {
    res = 0;
  }
  input.nextElementSibling.textContent = res;
}

Ответ №2:

Возможно, вам повезет больше, если вы попробуете подобный подход. Удалите атрибуты ID из элементов — вы можете заменить их именами классов, если хотите, или полностью удалить из span элемента, поскольку это не обязательно должно быть обязательным, чтобы позволить вам программно настроить на него таргетинг. Если вы используете sibling селекторы, вы можете использовать target атрибут event (в данном случае keyup в элементе number), а затем просмотреть DOM, чтобы найти диапазон…

 <?php
    for($i = 0; $i<3; $i  ){
?>
      <input type="number" class="numb" onkeyup="getvalue(event)"/>
      <span class="result"></span>
<?php
    }
?>

<script>
    function getvalue(e){
        var node=e.target.nextElementSibling;
        var res=parseInt(e.target.value) * 10;
        if( isNaN(res) )res=0;
        node.textContent=res;
    }
</script>
  

 function getvalue(e){
  var node=e.target.nextElementSibling;
  var res=parseInt(e.target.value) * 10;
  if( isNaN(res) )res=0;
  node.textContent=res;
}  
 <input type="number" onkeyup="getvalue(event)" />
<span></span>
<input type="number" onkeyup="getvalue(event)" />
<span></span>
<input type="number" onkeyup="getvalue(event)" />
<span></span>

Ответ №3:

Вы можете установить идентификатор для каждого ввода и связанного с ним диапазона результатов. Идентификатор будет просто $i цикла for. Это поможет легко получить доступ к указанному диапазону результатов в getvalue функции:

 <?php
for ($i = 0; $i < 3; $i  ) {
?>
    <div>
        <input type="number" data-input-id="<?php echo $i; ?>" onkeyup="getvalue(this)" >
        <span class="result-<?php echo $i; ?>"></span>
    </div>
<?php
}
?>

<script>
function getvalue (element) {
    const inputId = element.dataset.inputId;
    const val = element.value;
    let res = parseInt(val) * 10;
    res = isNaN(res) ? 0 : res;

    
     document.querySelector(`.result-${inputId}`).innerText = res;
}
</script>