函数不读取数据

Question

我的脚本有问题。我旁边有一个可编辑的字段和按钮。我试图创建一个函数，在我按下按钮后它将开始工作，它将从我的输入字段中读取数据，悬停它不会从我的输入字段中读取任何值并且 returns 输入为空。您能否提出任何可能的解决方案？我无法将任何输入或按钮类型更改为其他类型。完整代码：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>

Answer 1

问题是您正在阅读 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;
};

Answer 2

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

const value = this.value.trim();

至

const value = input.innerText.trim();

函数不读取数据

Function is not reading data

javascript

contenteditable