如何将网页计算器输入字段改为段落并实现激活交互与取值？

1. 完成输入字段到段落元素的转换 #

你已经在示例代码里完成了核心转换——把原本的<input>标签替换成<p>标签，同时保留了carbs和portion两个唯一ID，用初始文本作为输入提示（比如"Carbs/100g"）。如果之前的输入字段有默认数值，直接把提示文本替换成对应数值即可。

2. 为段落添加点击激活状态及视觉标识 #

步骤1：编写CSS激活样式 #

先定义一个.active类，用来给激活状态的段落添加视觉区分：

.inputs p {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: text;
  transition: all 0.2s;
  margin: 5px 0;
}

.inputs p.active {
  border-color: #2196F3;
  background-color: #f5f9ff;
  outline: none;
}

步骤2：添加JavaScript点击事件监听 #

通过JS给两个段落绑定点击事件，实现激活状态的切换，同时确保同一时间只有一个段落处于激活状态：

document.addEventListener('DOMContentLoaded', function() {
  const carbEl = document.getElementById('carbs');
  const portionEl = document.getElementById('portion');
  let activeEl = null;

  [carbEl, portionEl].forEach(el => {
    el.addEventListener('click', function() {
      // 移除上一个激活元素的状态
      if (activeEl) {
        activeEl.classList.remove('active');
      }
      // 给当前点击的元素添加激活类
      this.classList.add('active');
      activeEl = this;
    });
  });
});

3. 网页加载完成后获取段落对应的数值 #

在DOMContentLoaded事件中，读取段落文本内容，区分提示文本和实际输入的数值：

document.addEventListener('DOMContentLoaded', function() {
  const carbEl = document.getElementById('carbs');
  const portionEl = document.getElementById('portion');

  // 封装获取数值的工具函数
  function getValue(el, defaultValue = 0) {
    const text = el.textContent.trim();
    // 判断是否是初始提示文本
    const isPlaceholder = (el.id === 'carbs' && text === 'Carbs/100g') || 
                          (el.id === 'portion' && text === 'Portion (g)');
    return isPlaceholder ? defaultValue : parseFloat(text) || defaultValue;
  }

  // 页面加载完成后获取初始数值
  const carbsValue = getValue(carbEl);
  const portionValue = getValue(portionEl);
  console.log('碳水数值:', carbsValue);
  console.log('重量数值:', portionValue);
});

完整整合代码 #

把HTML、CSS、JS整合后的完整示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>营养计算器</title>
  <style>
    .calculator {
      width: 220px;
      margin: 20px auto;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 8px;
    }

    .screen {
      height: 40px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
      padding: 8px;
      text-align: right;
      line-height: 40px;
      font-size: 16px;
    }

    .inputs {
      margin-bottom: 15px;
    }

    .inputs p {
      padding: 8px 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: text;
      transition: all 0.2s;
      margin: 5px 0;
    }

    .inputs p.active {
      border-color: #2196F3;
      background-color: #f5f9ff;
      outline: none;
    }

    .calcul button {
      width: 55px;
      height: 40px;
      margin: 2px;
      cursor: pointer;
      border: none;
      border-radius: 4px;
      background-color: #f0f0f0;
      transition: background-color 0.2s;
    }

    .calcul button:hover {
      background-color: #e0e0e0;
    }
  </style>
</head>
<body>
  <div class="calculator">
    <div class="screen"></div>
    
    <div class="inputs">
      <p id="carbs">Carbs/100g</p>
      <p id="portion">Portion (g)</p>
    </div>
    
    <div class="calcul">
      <button id="one">1</button>
      <button id="two">2</button>
      <button id="three">3</button><br>
      <button id="four">4</button>
      <button id="five">5</button>
      <button id="six">6</button><br>
      <button id="seven">7</button>
      <button id="eight">8</button>
      <button id="nine">9</button><br>
      <button id="zero">0</button>
      <button id="decimal">.</button>
      <button id="clear">C</button><br>
      <button id="save">Save</button>
      <button id="equals">=</button>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const carbEl = document.getElementById('carbs');
      const portionEl = document.getElementById('portion');
      const screenEl = document.querySelector('.screen');
      let activeEl = null;

      // 激活状态切换逻辑
      [carbEl, portionEl].forEach(el => {
        el.addEventListener('click', function() {
          if (activeEl) {
            activeEl.classList.remove('active');
          }
          this.classList.add('active');
          activeEl = this;
        });
      });

      // 获取数值工具函数
      function getValue(el, defaultValue = 0) {
        const text = el.textContent.trim();
        const isPlaceholder = (el.id === 'carbs' && text === 'Carbs/100g') || 
                              (el.id === 'portion' && text === 'Portion (g)');
        return isPlaceholder ? defaultValue : parseFloat(text) || defaultValue;
      }

      // 页面加载完成后获取初始数值
      const carbsValue = getValue(carbEl);
      const portionValue = getValue(portionEl);
      console.log('碳水数值:', carbsValue);
      console.log('重量数值:', portionValue);

      // 数字按钮输入逻辑
      const numberButtons = document.querySelectorAll('.calcul button:not(#clear):not(#save):not(#equals)');
      numberButtons.forEach(btn => {
        btn.addEventListener('click', function() {
          if (!activeEl) return;
          // 若当前是提示文本，先清空再输入
          const isPlaceholder = (activeEl.id === 'carbs' && activeEl.textContent === 'Carbs/100g') || 
                                (activeEl.id === 'portion' && activeEl.textContent === 'Portion (g)');
          activeEl.textContent = isPlaceholder ? this.textContent : activeEl.textContent + this.textContent;
        });
      });

      // 清除按钮逻辑
      document.getElementById('clear').addEventListener('click', function() {
        if (!activeEl) return;
        const placeholderText = activeEl.id === 'carbs' ? 'Carbs/100g' : 'Portion (g)';
        activeEl.textContent = placeholderText;
      });

      // 计算按钮逻辑
      document.getElementById('equals').addEventListener('click', function() {
        const carbs = getValue(carbEl);
        const portion = getValue(portionEl);
        const result = (carbs / 100) * portion;
        screenEl.textContent = `总碳水: ${result.toFixed(2)}g`;
      });
    });
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Sifeddine Bachir