Как добавить несколько текстовых полей для замены текста на странице? - PullRequest
Новая
       25

Как добавить несколько текстовых полей для замены текста на странице?

0 голосов
/ 01 апреля 2020

У меня есть текст ниже на странице, используя HTML:

"Здравствуйте, меня зовут HuggyBiscuit"

Я хотел бы иметь возможность добавлять ящики, например, для изменения " my "и" Huggybiscuit "

Я могу изменить 1 из них (например, HuggyBiscuit), используя следующий код 

<!DOCTYPE html>
<html>
<head>
</head>

<body>
  <script type="text/javascript">
  function myFunction(input){
    var elementValue = input.value;
    document.getElementById("test1").innerHTML = elementValue;
  }
  </script>
  
  <input id="name" name="name" onkeyup = myFunction(this) type="text" value="HuggBiscuit">
  <br>
  Hello my name is <code id="test1">HuggBiscuit</code>
  
</body>
</html>

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

Пример 2 неработающих блоков: 

<!DOCTYPE html>
<html>
<head>
</head>

<body>
  <script type="text/javascript">
  function myFunction(input){
    var elementValue = input.value;
    document.getElementById("test1","test2").innerHTML = elementValue;
  }
  </script>

  <input id="name" name="name" onkeyup = myFunction(this) type="text" value="HuggBiscuit">
  <input id="person" name="name" onkeyup = myFunction(this) type="text" value="my">
  <br>
  Hello <code id="test2">my</code> name is <code id="test1">HuggBiscuit</code>

</body>
</html>

Ответы [ 2 ]

2 голосов
/ 01 апреля 2020

Get document.getElementById("test1","test2"), вернуть только один элемент. Вы можете передать идентификатор для изменения из функции вызова. 

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <script type="text/javascript">
        function myFunction(input, id) {
            var elementValue = input.value;
            document.getElementById(id).innerHTML = elementValue;
        }
    </script>

    <input id="name" name="name" onkeyup="myFunction(this,'text2')" type="text" value="HuggBiscuit">
    <input id="person" name="name" onkeyup="myFunction(this, 'text1')" type="text" value="my">
    <br>
    Hello <code id="text1">my</code> name is <code id="text2">HuggBiscuit</code>

</body>

</html>
0 голосов
/ 01 апреля 2020

Вы можете передать два параметра в myFunction()

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

Используя document.querySelectorAll(), вы можете автоматизировать этот процесс, чтобы каждый элемент ввода был одним TextField, имеющий один и тот же параметр («имя», «цель» и т. Д. c.) 

<body>
  <script type="text/javascript">
  function myFunction(input,field){
    var elementValue = input.value;
    document.getElementById(field).innerHTML = elementValue;
  }

  </script>

  <input id="name" class="inputField" name="name" onkeyup = myFunction(this,'test1') type="text" value="HuggBiscuit">
  <input id="person" class="inputField" name="name" onkeyup = myFunction(this,'test2') type="text" value="my">
  <br>
  Hello <code id="test2">my</code> name is <code id="test1">HuggBiscuit</code>

</body>

. Вот простой код для автоматического способа создания нескольких соединений ввода / текстового поля 

<body>

  <input id="name" class="inputField" name="test1" type="text" value="HuggBiscuit">
  <input id="person" class="inputField" name="test2"  type="text" value="my">
  <input id="pet" class="inputField" name="test3"  type="text" value="parrot">
  <br>
  Hello <code id="test2">my</code> name is <code id="test1">HuggBiscuit</code> and i have a(n) <code id="test3">parrot</code>

</body>
<script type="text/javascript">

  document.querySelectorAll(".inputField")
  .forEach(x=>x.addEventListener("keyup",(e)=>{document.getElementById(e.target.name).innerText = e.target.value}))

</script>
...