Question

我的Html页面代码：

＆＃13;

<!DOCTYPE html>
<html>
  <head><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
  </head><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <script>
        function LengthConverter() 
        {
        var inchRef,inchtoCmResultRef;
        var inch,centimetres;
        inchRef=document.getElementById("inchToCmValue");
        inchtoCmResultRef=document.getElementById("inchtoCmResult");
        inch=Number(inchRef.value);
        centimetres=Number(inchtoCmResultRef.value)
        centimetres=2.54*inch
        inchtoCmResultRef.innerText=centimetres;
      
        }
        function LengthConvertercmToinch()
        {
        var inch2Ref,cmtoInchResultRef;
        var inchTwo,centimetresTwo;
        inch2Ref=document.getElementById("cmToInchValue");
        cmtoInchResultRef=document.getElementById("cmToInchRe");
        inchTwo=Number(inch2Ref.value);
        centimetresTwo=Number(cmtoInchResultRef.value)
        inchTwo=centimetresTwo/2.54
        cmtoInchResultRef.innerText=inchTwo;
        }
    </script>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js">
    
    </script>
  <body>
        <!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Length -->
      <span class="mdl-layout-title">Length</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Length</a>
        <a class="mdl-navigation__link" href="Mass.html">Mass</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Change conversion</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Length</a>
      <a class="mdl-navigation__link" href="Mass.html">Mass</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col"><h3>Centimetres to inches</h3>
<!-- Numeric Textfield with Floating Label -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="cmToInchValue">
    <label class="mdl-textfield__label" for="cmToInchValue">Centimetres...</label>
    <span class="mdl-textfield__error">Input is not a number!</span>
  </div>
</form>
<!-- Raised button with ripple --><h4>Inches:</h4>
<span id="cmToInchRe"></span><button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" onclick="LengthConvertercmToinch()">Convert to Inches</button>
</div>
  <div class="mdl-cell mdl-cell--4-col"><h3>Inches to centimetres</h3>
<!-- Numeric Textfield with Floating Label -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="inchToCmValue">
    <label class="mdl-textfield__label" for="inchToCmValue">Inches...</label>
    <span class="mdl-textfield__error">Input is not a number!</span>
  </div>
</form>

<!-- Raised button with ripple --><h4>Centimetres:</h4>
<span id="inchtoCmResult"></span> <button onclick="LengthConverter()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Convert to Centimetres</button>
</div>
</div>
</div>
  </main>
</div>
</body>
</html>

＆＃13;

我知道这是一段很长的代码，但我找不到错误？

我基本上复制了材料设计精简版（mdl）网站上的代码，以获得创建网页的界面，将cm转换为英寸，反之亦然，它还通过对代码进行细微更改来链接到网页。

我自己输入转换功能和onclick功能。

但是只有网页的右侧工作，而左列返回null？非常感谢帮助。

Answer 1

我改变了你的代码＆＃34; LengthConvertercmToinch（）＆＃34;在这里观察只添加了一个变量

  function LengthConvertercmToinch()
    {
    var inch2Ref,cmtoInchResultRef;
    var inchTwo,centimetresTwo,inchTwo1;
    inch2Ref=document.getElementById("cmToInchValue");
    cmtoInchResultRef=document.getElementById("cmToInchRe");
    inchTwo=Number(inch2Ref.value);
    centimetresTwo=Number(cmtoInchResultRef.value)
    inchTwo1=inchTwo/2.54
    cmtoInchResultRef.innerText=inchTwo1;
    }

我认为现在你的问题已经解决了

如果您的问题得到解决，请告诉我

我的javascript代码不起作用？

1 个答案: