javascript - 像素到厘米的转换脚本不起作用-6ren

javascript - 像素到厘米的转换脚本不起作用

转载作者：行者123 更新时间：2023-12-02 13:51:45

26

4

目标是在一个文本框中输入特定值(像素或厘米)，然后按按钮，然后按钮进行一些数学运算并将结果显示在不同的文本框中。

结果是，我会得到“NaN”的结果，这意味着我输入的字符串没有被正确转换。我已经尝试了数百种方法来解决此问题，但仍然不起作用。

代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Conversion</title>
</head>

<body bgcolor=#FF0000>
  <form id="conversions" name="conversions">
    Pixel value :
    <br>
    <input type="text" name="pxvalue" id="pxvalue">
    <br>
    <input type="submit" name="convertcm" id="convertcm" value="Convert cm to px!">
    <input type="submit" name="convertpx" id="convertpx" value="Convert px to cm!">
    <br>Centimeter value :
    <br>
    <input type="text" name="cmvalue" id="cmvalue">
    <br>
    <br>Output :
    <input type="text" name="output" id="output">
  </form>

  <!-- This is where all the JavaScript code goes -->
  <script>
    var form = document.getElementById("conversions");
    var strcmvalue = form.elements["cmvalue"];
    var strpxvalue = form.elements["pxvalue"];
    var cmvalue = ToInteger(strcmvalue);
    var pxvalue = ToInteger(strpxvalue);
    var output = document.getElementById("output");

    var ccmbutton = document.getElementById("convertcm").onclick = cm_to_pixel_conversion(cmvalue);
    var cpxbutton = document.getElementById("convertpx").onclick = pixel_to_cm_conversion(pxvalue);

    var cm_per_pixel = 0.026458333;
    var px_per_cm = 37.795275591;

    function pixel_to_cm_conversion(pvalue) {
      cmconversion = pvalue / px_per_cm;
      output.value = cmconversion.toString();
    }

    function cm_to_pixel_conversion(cvalue) {
      pxconversion = cvalue / cm_per_pixel;
      output.value = pxconversion.toString();
    }

    function ToInteger(x) {
      x = Number(x);
      return x < 0 ? Math.ceil(x) : Math.floor(x);
    }
  </script>
  <!-- End of the JavaScript code-->

</body>

</html>

最佳答案

因为您没有向该方法传递值，所以您传递的是 html 元素。

var strcmvalue = form.elements["cmvalue"];  //reference element
var strpxvalue = form.elements["pxvalue"];  
var cmvalue = ToInteger(strcmvalue);  //passing element, not the value
var pxvalue = ToInteger(strpxvalue);

您需要strcmvalue.value或form.elements["cmvalue"].value

下一个问题是您在页面加载时读取值，因此您只能获得页面加载时的值。

因此，您应该在方法内部读取这些值并将它们转换为数字，而不是在页面加载时。

之后您的点击事件将调用该函数，而不是引用它。

var ccmbutton = document.getElementById("convertcm").onclick = function () {
    var num = parseInt(strcmvalue.value, 10);
    cm_to_pixel_conversion(num);
    return false;
};

关于javascript - 像素到厘米的转换脚本不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40984347/

26

4

0

文章推荐： haskell - 如何将一元函数作为带有灵活类型变量的参数传递？

文章推荐： grails - 将外部域类导入Grails

文章推荐： haskell - 分数类型比较

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

javascript - 像素到厘米的转换脚本不起作用