在不同的HTML页面上显示计算结果,使用JavaScript实现

3
我是一个完全的新手,正在学习HTML和JavaScript。我正在制作一份逐步绘制Sri Chakra的指南,每个步骤都需要进行计算,我希望用户只需输入一个数字,就可以显示所有公式,就像答案一样。这些计算很简单,例如x/4=a,x/5=b,x/8=c,x*1.15=d。 然后当他们到达该步骤的不同页面时,我希望a或b或c或d出现。当他们第一次计算时,我希望数字以答案的形式出现。 这是我为一个页面准备的内容。 我的JS是calculator.js
function calculate(){
var mainradius=prompt ("What is the radius of the Main Circle?","");
var a=mainradius/4;
localStorage.setItem("fourth","a");
document.write(fourth + "<br />");
var b=mainradius/5;
var b= localStorage.setItem ("1/5","b");
var c=mainradius/8;
var c= localStorage.setItem ("1/8","c");
var d=mainradius*1.15;
var e=mainradius*1.25;
var f=mainradius*1.3;
var g=mainradius*1.35;
var h=mainradius*1.4;
var i=mainradius*1.45;
var j=mainradius*1.5;
}

the page that runs the calculator page 2 is
<html>
<head>
<title> Material and Calculator</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<script type="text/javascript" src="calculator.js">
</script>
<input type="number" onclick="calculate()" value="0">
<h1> Material and Calculator </h1>
<h3> Input the length of the Main Radius <br/>

<h3><form oninput="x.value=parseInt(mainradius.value)/4, y.value=parseInt(mainradius.value)/5, z.value=parseInt(mainradius.value)/8
, g.value=parseInt(mainradius.value)*1.15, h.value=parseInt(mainradius.value)*1.25, i.value=parseInt(mainradius.value)*1.3, j.value=parseInt(mainradius.value)*1.35, 
k.value=parseInt(mainradius.value)*1.4,l.value=parseInt(mainradius.value)*1.45, m.value=parseInt(mainradius.value)*1.5">
  <input type="number" id="mainradius" value="0">
  =<output name="x" for="mainradius"></output> ( 1/4th ) <br>
  =<output name="y" for="mainradius"></output> ( 1/5th ) <br>
  =<output name="z" for="mainradius"></output> ( 1/8th ) <br>
  =<output name="g" for="mainradius"></output> ( *1.15 ) <br>
  =<output name="h" for="mainradius"></output> ( *1.25 ) <br>
  =<output name="i" for="mainradius"></output> ( *1.3 )  <br>
  =<output name="j" for="mainradius"></output> ( *1.35 ) <br>
  =<output name="k" for="mainradius"></output> ( *1.4 )  <br>
  =<output name="l" for="mainradius"></output> ( *1.45 ) <br>
  =<output name="m" for="mainradius"></output> ( *1.5 )  <br>
  </form>
<p> Reccomended using 4 or 5 </p>
</fieldset>
</form></h3>
<h1><a href="index.html"> Back </a>
<a href="3.html"> Next </a></h1>
</body>
</html>

and the page I want like the one fourth to come up in is page 5
<html>
<head>
<title> Step 3 a.</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1> Step 3a </h1>
<h2> Now Mark your line with 9 Marks, Labeled A-I </h2>
<h2> You will split the top half of the radius into 4 Sections </h2>
<h3> Label the Top of the Line A </h3>
<h3> 1/4th the radius from A Label B </h3>
<script type="text/javascript" src="calculator.js">
var fourth =parseInt(localStorage.getItem("fourth"));
document.write(fourth + "<br />");
</script>
<output type="number" value="fourth"> is 1/4th the radius </output>

<h3> 1/4th the radius from B Label C </h3>
<h3> 1/5th the radius from C Label D </h3>
<h2><img class="pic3" src="../gifs/4Marks.png" /> </h2>
<h2><img class="pic2" src="../gifs/3.gif"/> </h2>
<h1><a href="4.html"> Back </a>
<a href="6.html"> Next </a></h1>
</body>
</html>

你为什么打上了“java”的标签,如果你只是在学习HTML和JavaScript呢? - The_Tourist
请不要使用与之无关的标签,例如“Java”。只需标记“javascript”即可获得足够的支持。 - rodit
我相信原因是,引用他的话说,"我对这个完全是新手"。 - secondbreakfast
1
@zero01alpha - 哈哈 - T-Heron
是的,这真的是我的第一篇帖子哈哈 - Kopi Thiyagalingam
1个回答

0
最简单且可能最有效的方法是将计算出的值存储在本地存储中,需要时再读取它们。
// write
localStorage.setItem("valueA", "22");

// read
var valA = parseInt(localStorage.getItem("valueA"));

@KopiThiyagalingam,你能展示一下如何使用它,包括存储和恢复值吗?我下班后会看一下。 - Asons
@KopiThiyagalingam 将其添加到您的问题中,并为我提供一个fiddle或类似的链接。 - Asons
我已将其添加到我的问题中,谢谢 :) 不确定什么是fiddle。 - Kopi Thiyagalingam
@KopiThiyagalingam 使用 localStorage.setItem("fourth",a); ... 注意,a 是一个变量,所以不需要引号 " - Asons
好的,看起来它正确地存储了数据,但是我该如何在稍后将其显示出来呢?当我尝试使用document.write时,它往往会抹去页面上的其他内容。 - Kopi Thiyagalingam
显示剩余6条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接