函数未读取数据答案

【问题标题】：Function is not reading data函数未读取数据
【发布时间】：2022-01-19 23:04:52
【问题描述】：

我的脚本有问题。我旁边有一个可编辑的字段和按钮。我试图创建一个在我按下按钮后开始工作的函数，它将从我的输入字段中读取数据，悬停它不会从我的输入字段中读取任何值并返回输入为空。您能否提出任何可能的解决方案？我无法将任何输入或按钮类型更改为其他类型。完整代码：https://codesandbox.io/s/cocky-black-7mezc?file=/code.html

const trigger =
  document.getElementById("poga1");
trigger.addEventListener("click", next);


function next() {
  document.getElementById("input")


  // default to no data
  let message = "there are no data!";
  const output = document.getElementById("output");

  // get the value, this will be text - trim all leading and trailing spaces 
  const value = this.value.trim();
  if (value !== "") {
    // try to convert it to an integer
    const numeric = parseInt(value);
    // check if it's a number and if it matches what was entered
    if (isNaN(numeric) || numeric != value) {
      message = "not a number";
    } else
    if (numeric >= 1 && numeric <= 3) {
      message = "not passed";
    } else if (numeric >= 4 && numeric <= 10) {
      message = "passed!";
    } else {
      message = "wrong data";
    }
  }
  output.textContent = message;
};

<span contenteditable="true"><p id="input"></p></span>
<button id="poga1">Check!</button>
<span contenteditable="true"><p id="output">Vispirms ievadi datus!</p></span>

【问题讨论】：

next 函数的第一行是做什么的？它似乎没有做任何事情
next 在按钮上，而不是可编辑的。 input 为空。 output 有数据。您需要从您想要的字段中获取数据——您似乎正在跳过这一步。
我通过运行函数“next”来保证它会通过 id 输入获取元素，然后他们会检查这个值。我错了吗？
跨度没有值属性，表单元素有。你可能想要 innerHTML
@j08691 我应该用 innerHTML 替换哪一行？

标签： javascript contenteditable

【解决方案1】：

如果您尝试读取 id 为 input 的元素的内容，则必须更改行

const value = this.value.trim();

到

const value = input.innerText.trim();

【讨论】：

非常感谢，这么小的东西，但它解决了一切！来自我的爱！

【解决方案2】：

问题是您正在阅读this.value。 this 指的是按钮，因此您正在读取按钮的值。 HTML

<div contenteditable="true" id="input"></div>
<button id="poga1">Check!</button>
<span><p id="output">Vispirms ievadi datus!</p></span>

脚本

const trigger = document.getElementById("poga1"),
    input = document.getElementById("input"), 
    output = document.getElementById("output");
trigger.addEventListener("click", next);    
    
    
function next() {
document.getElementById("input")
    
    
  // default to no data
  let message = "There are no data!";
  
  // get the value, this will be text - trim all leading and trailing spaces 
  const value = input.innerHTML.trim();
  if (value !== "") {
    // try to convert it to an integer
    const numeric = parseInt(value);
    // check if it's a number and if it matches what was entered
    if (isNaN(numeric) || numeric != value) {
      message = "not a number";
    } else
    if (numeric >= 1 && numeric <= 3) {
      message = "not passed";
    } else if (numeric >= 4 && numeric <= 10) {
      message = "passed!";
    } else {
      message = "wrong data";
    }
  }
  output.textContent = message;
};

【讨论】：