Замена текста в абзаце, когда пользователь вводит что-то в текстовое поле - PullRequest
Новая
       0

Замена текста в абзаце, когда пользователь вводит что-то в текстовое поле

0 голосов
/ 11 марта 2020

Я пытаюсь изменить текст в теге абзаца, когда я вхожу в текстовое поле и отправляю его. Например, если в абзаце написано «оранжевый», и если я вписываю «оранжевый» в поле, он изменится на «апельсины потрясающие». 

function changeText() {
  let lbl = document.getElementById('change');
  let empName = document.getElementById('textbox').value;
  lbl.innerText = empName;
}
<p id="change">Apple or Orange?</p>
<input type="text" id="textbox" />
<input type="button" value="Submit" onclick="changeText()" />

Ответы [ 2 ]

2 голосов
/ 11 марта 2020

Просто добавьте блок if, чтобы проверить, являются ли значения яблоками, оранжевыми или чем-то еще, затем обновите абзац 


<html lang="en">
<link rel="stylesheet" href="styles.css">

<title>Apple or Oranges</title>

<body>
<p id="change"> Apple or Orange?
</p>
<input type="text" id="textbox"/>
<input type="button" value="Submit" onclick="changeText()" />

<script>
    function changeText() {
        let lbl = document.getElementById('change');
        let empName = document.getElementById('textbox').value;

        if (
          empName.toUpperCase() === 'APPLE' ||
          empName.toUpperCase() === 'APPLES' ||
          empName.toUpperCase() === 'ORANGE' ||
          empName.toUpperCase() === 'ORANGES'
        ) {
          empName += " are awesome"
        }
        lbl.innerText = empName;
    }
</script>
</body>
</html>
0 голосов
/ 11 марта 2020

Просто небольшое изменение в ответе выше: 

<html lang="en">
<link rel="stylesheet" href="styles.css">

<title>Apple or Oranges</title>

<body>
<p id="change"> Apple or Orange?
</p>
<input type="text" id="textbox"/>
<input type="button" value="Submit" onclick="changeText()" />

<script>
    function changeText() {
        //let lbl = document.getElementById('change');
        let empName = document.getElementById('textbox').value;

        if (
          empName.toUpperCase() === 'APPLE' ||
          empName.toUpperCase() === 'APPLES' ||
          empName.toUpperCase() === 'ORANGE' ||
          empName.toUpperCase() === 'ORANGES'
        ) {
          empName += " are awesome"
        }
        document.querySelector('#change').insertAdjacentHTML('beforeend', empName);
        // lbl.innerText = empName;
    }
</script>
</body>
</html>

Дополнительная информация :: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...