时间戳

首页 > 解决方案 > 如何使输入再次可编辑？

javascript - 如何使输入再次可编辑？

问题描述

我正在尝试制作一个无需按下按钮即可立即转换的数字转换器。这是迄今为止在codepen上的代码，请测试它（首先使用十进制输入而不是使用二进制输入，忽略它们还没有功能的八进制和十六进制）：

https://codepen.io/ahmadbenos/full/eYprJyW

    const binary = document.getElementById("binary");
const octal = document.getElementById("octal");
const decimal = document.getElementById("decimal");
const hex = document.getElementById("hex");

var binaryIsClicked = false;
var octalIsClicked = false;
var hexIsClicked = false;
var decimalIsClicked = false;

var decimalConvert = setInterval(convertDecimal, 50);

function convertDecimal() {
  binary.value = Number(decimal.value).toString(2);
  octal.value = Number(decimal.value).toString(8);
  hex.value = Number(decimal.value).toString(16);

  if (decimal.value === "") {
    binary.value = "";
    octal.value = "";
    hex.value = "";
  }
}
  binary.addEventListener('click', function() {
    clearInterval(decimalConvert);
    binaryIsClicked = true;
    var binaryConvert = setInterval(convertBinary, 50);

    function convertBinary() {
      decimal.value = parseInt(binary.value, 2);
      octal.value = parseInt(binary.value, 2).toString(8);
      hex.value = parseInt(binary.value, 2).toString(16);

      if (binary.value === "") {
        decimal.value = "";
        octal.value = "";
        hex.value = "";
      }

    }
    });

所以问题来了，如果你先在十进制字段中输入一个数字 = 正常工作

之后您转到二进制输入字段并编辑/输入一个新数字=正常工作

之后，您再次进入十进制输入字段，但如果您尝试编辑/键入您不能，它会停留在前一个间隔（二进制间隔）。

有什么问题 ？我再次单击十进制字段后尝试清除二进制间隔，但它不起作用。

标签： javascripthtml

解决方案

我在那里修复了它：

    //elements
const binary = document.getElementById("binary");
const octal = document.getElementById("octal");
const decimal = document.getElementById("decimal");
const hex = document.getElementById("hex");

//have no idea what these are for
var binaryIsClicked = false;
var octalIsClicked = false;
var hexIsClicked = false;
var decimalIsClicked = false;

//intervals not set yet, will be in event handlers functions

var decimalConvert;
var binaryConvert;



//event handlers
decimal.addEventListener('click', () =>{
  //sets decimalConvert interval and clearing binaryConvert interval
  decimalConvert = setInterval(convertDecimal, 50);
  clearInterval(binaryConvert)
    console.log("decimal clicked " + decimalActive)
})
binary.addEventListener('click', () =>{
  //sets binaryConvert interval and clearing decimalConvert interval
  binaryConvert =  setInterval(convertBinary, 50)
  clearInterval(decimalConvert)
  console.log("binary clicked " + binaryActive)
})

//functions for event handlers
function convertDecimal() {
  //convert decimals to other types
  binary.value = Number(decimal.value).toString(2);
  octal.value = Number(decimal.value).toString(8);
  hex.value = Number(decimal.value).toString(16);

  console.log("function convertDecimal executed")

  if (decimal.value === "") {
    binary.value = "";
    octal.value = "";
    hex.value = "";
  }
}
function convertBinary() {
  //converts binary to other types
      decimal.value = parseInt(binary.value, 2);
      octal.value = parseInt(binary.value,         2).toString(8);
      hex.value = parseInt(binary.value, 2).toString(16);

  console.log("function convertBinary executed")

      if (binary.value === "") {
        decimal.value = "";
        octal.value = "";
        hex.value = "";
      }
}

你做对的是clearInterval十进制。但是，您没有为二进制执行此操作。因此，您添加了第二个事件侦听器console.log来检查您的工作，我使用它来查看哪些时间间隔已执行和未执行以解决此问题。

推荐阅读