JavaScript新手求助：如何将输入值复制到div及按钮点击显示指定文本

嘿，刚学JS感到困惑太正常啦！咱们一步步拆解你的需求，很快就能上手！

一、按钮点击显示对应自定义短语 #

先搭好基础的HTML结构，两个按钮加一个用来展示内容的div：

<!-- HTML结构 -->
<button id="blueBtn">blue</button>
<button id="greenBtn">green</button>
<div id="contentDisplay"></div>

然后写JavaScript逻辑，给每个按钮绑定点击事件，点击时修改div的内容：

// 获取页面元素
const blueBtn = document.getElementById('blueBtn');
const greenBtn = document.getElementById('greenBtn');
const displayDiv = document.getElementById('contentDisplay');

// 蓝色按钮点击事件
blueBtn.addEventListener('click', () => {
  displayDiv.textContent = 'the color blue';
});

// 绿色按钮点击事件
greenBtn.addEventListener('click', () => {
  displayDiv.textContent = 'the color green';
});

简单解释下：getElementById用来抓取页面上的元素，addEventListener给按钮绑定点击触发的动作，点击后就把div的文本内容换成你要的短语～

二、把输入框的值复制到div中 #

同样先补全HTML，加一个输入框和触发复制的按钮（也可以做实时同步，先给你写点击触发的版本，更直观）：

<!-- 新增的输入相关元素 -->
<br><br> <!-- 换行分开两个功能 -->
<input type="text" id="inputField" placeholder="输入任意内容...">
<button id="copyBtn">复制到div</button>

然后补充JavaScript代码实现复制功能：

// 获取输入框和复制按钮
const inputField = document.getElementById('inputField');
const copyBtn = document.getElementById('copyBtn');

// 复制按钮点击事件
copyBtn.addEventListener('click', () => {
  displayDiv.textContent = inputField.value;
});

如果想要实时同步（输入的时候div里就跟着变），可以把事件换成input事件，不用按钮也能实现：

inputField.addEventListener('input', () => {
  displayDiv.textContent = inputField.value;
});

最后把所有代码整合到一个HTML文件里就能测试啦：

<!DOCTYPE html>
<html>
<head>
  <title>JS Demo</title>
</head>
<body>
  <button id="blueBtn">blue</button>
  <button id="greenBtn">green</button>
  <div id="contentDisplay"></div>

  <br><br>
  <input type="text" id="inputField" placeholder="输入任意内容...">
  <button id="copyBtn">复制到div</button>

  <script>
    const blueBtn = document.getElementById('blueBtn');
    const greenBtn = document.getElementById('greenBtn');
    const displayDiv = document.getElementById('contentDisplay');
    const inputField = document.getElementById('inputField');
    const copyBtn = document.getElementById('copyBtn');

    blueBtn.addEventListener('click', () => {
      displayDiv.textContent = 'the color blue';
    });

    greenBtn.addEventListener('click', () => {
      displayDiv.textContent = 'the color green';
    });

    copyBtn.addEventListener('click', () => {
      displayDiv.textContent = inputField.value;
    });

    // 可选：取消注释开启实时同步
    // inputField.addEventListener('input', () => {
    //   displayDiv.textContent = inputField.value;
    // });
  </script>
</body>
</html>

把这段代码保存成.html文件，用浏览器打开就能直接测试效果啦～

内容的提问来源于stack exchange，提问作者Thiago Soubra