Question

当我在文本框中输入内容并提交时，我试图更改段落标记中的文本。例如，如果该段显示“橙色”，并且如果我在框中输入“橙色”，则其更改为“橙色很棒”。

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()" />

Answer 1

只需添加一个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>

Answer 2

上述答案中的微小变化：

<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

用户在文本框中输入内容时替换段落中的文本

2 个答案: