JS - 更改特定文本输入字段的值（类有几个输入元素）

Question

I have this JS function:

 function insert(i) {
      let elem = document.querySelector('.input_user');
      let old = elem.value;
      elem.value = old + i;
    };

I want to let the user add special characters to the input field. The problem is that there are several input fields with the same class since the form is generated by a php loop. So it will always put the char in the first input field generated.

<form action="ergebnisse.php" method="post">
          <?php
          while($row = $abfrage->fetch_assoc()) { ?>
            <div class="abfragefeld grid-8">
              <p class="vokabel"><?php echo $row["art_de"] . ' ' . $row["vok_de"]?></p>
              <p class="form"><?php echo $row["form"] ?></p>
              <p id="beispiel"><?php echo $row["beispiel"] ?></p>
              <input type="hidden" value="<?php echo $row['id']?>" name="id[]">
              <select class="art_select" name="art_fr_ip[]">
                <option value="le">le</option>
                <option value="la">la</option>
                <option value="l'">l&apos;</option>
                <option value="les">les</option>
                <option value="Ils/Elles">Ils/Elles</option>
                <option value="">kein Artikel</option>
              </select>
              <input class="input_user" type="text" name="vok_fr_ip[]">
              <div class="special_chars">
                <a onclick="insert('Ç')" class="char">&Ccedil;</a>
                <a onclick="insert('ç')" class="char">&ccedil;</a>
              </div>
            </div>
            <?php
          }
        } else {
          echo "0 results";
        }?>
      </div>

      <div class="slide-nav left_nav">
        <a type="button" class="prev" onclick="plusSlides(-1)">&#8249;</a>
      </div>
      <div class="slide-nav right_nav">
        <a class="next" onclick="plusSlides(1)">&#8250;</a>
      </div>
      <div class="submit_abfrage">
        <input class="check" type="submit" value="Alle Antworten abschicken">
      </div>
    </form>

Is there a way to tell JS to send the string to the active input field or to the one with a certain CSS value (one only at a time is visible, others set to display: none)?

Thank You

Answer 1

First step would be to avoid inline handlers, since they have terrible scoping rules and have escaping problems - better to use addEventListener nowadays.

It looks like the character you want to insert is the same as the textContent of the <a> being clicked, so you can use that instead of passing an argument to insert .

On click of something in a special_chars div, go to the upper div and then to the previous sibling to get to the <input> , and you can change it for that row.

document.querySelector('form').addEventListener('click', (e) => {
  if (!e.target.closest('.special_chars') || !e.target.matches('a')) return;
  // Then the click was on an `<a>` we're interested in:
  const charToInsert = e.target.textContent;
  const input = e.target.parentElement.previousElementSibling;
  input.value += charToInsert;
});

Another option, by iterating over all .special_chars elements:

for (const container of document.querySelectorAll('.special_chars')) {
  container.addEventListener('click', (e) => {
    if (e.target.matches('a')) {
      container.previousElementSibling.value += e.target.textContent;
    }
  });
}

Answer 2

Generally, form inputs will have a name attribute. CSS selectors don't have to be the class. There are several forms: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors In this case, what you're looking for is "Attribute Selector"

Without knowing which specific one you want, the general pattern would be:

document.querySelector('input[name="field-name"]')