Skocz do zawartości

Wyświetlenie wyników obliczeń na ekranie użytkownika JavaScript


FemtoBadianCanadian
 Udostępnij

Rekomendowane odpowiedzi

Witam! Mam problem z zrobieniem pewnego mechanizmu w javascript, ponieważ chciałbym aby obliczenia, które robi javascript wyświetlić na ekranie.

O to kod:

HTML:

Spoiler

<!DOCTYPE html>
<html lang="pl">
<head>

	<link rel="Shortcut icon" href="img/Pi-symbol1.jpg"/>

	<meta charset="UTF-8">
	<meta name="Description" content="Informacje o astronomi, fizyce i informatyki.">
	<meta name="Keywords" content="Siła, Pole, Objętość, Gęstość, Ciśnienie, Sinus, Cosinus, Gramy itp.">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Astronomium</title>

</head>
<body>

	<link rel="stylesheet" href="css/kalku.css">
	<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
	<link rel="stylesheet" href="fontello/css1/fontello.css">
	 
	 <div id="wrapper">
			<div id="header">
				<div id="logo">
					<span style="color: #c34f4f">Astro</span><span style="color: #0000ff">nomium</span>
				</div>
			</div>
			<div class="nav">
				<ol>
					<li><a href="index.html">Strona główna</a></li>
					<li><a href="astro.html">Astronomia</a>
						<ul>
							<li><a href="#">Obserwacje<br>astronomiczne</a></li>
							<li><a href="#">Astronomia<br>teoretyczna</a></li>
							<li><a href="#">Szczególne<br>poddziedziny</a></li>
							<li><a href="#">Główne problemy</a></li>
							<li><a href="#">Badania interdyscyplinarne</a></li>
							<li><a href="#">Astronomia Amatorska</a></li>
							<li><a href="#">News</a></li>
						</ul>
					</li>
					<li><a href="fizyka.html">Fizyka</a>
						<ul>
							<li><a href="#">Fizyka teoretczna</a></li>
							<li><a href="#">Fizyka eksperymentalna</a></li>
							<li><a href="#">Szczególne<br>poddziedziny</a></li>
							<li><a href="#">Ważne prawa</a></li>
							<li><a href="#">Ważne równania</a></li>
							<li><a href="#">Działy interdyscyplinarne i pokrewne</a></li>
							<li><a href="#">News</a></li>
						</ul>
					</li>
					<li><a href="infa.html">Informatyka</a>
						<ul>
							<li><a href="#">Języki programowania</a></li>
							<li><a href="#">Kursy programowania</a></li>
							<li><a href="#">Szczególne<br>poddziedziny</a></li>
							<li><a href="#">Historia</a></li>
							<li><a href="#">Wykorzystanie</a></li>
							<li><a href="#">News</a></li>
						</ul>
					</li>
					<li><a href="tech.html">Technologia</a>
						<ul>
							<li><a href="#">Technologia Przyszłości</a></li>
							<li><a href="#">Technologia Teraźniejszości</a></li>
							<li><a href="#">Szczególne<br>poddziedziny</a></li>
							<li><a href="#">Problemy Przyszłości</a></li>
							<li><a href="#">Wykorzystanie</a></li>
							<li><a href="#">News</a></li>
						</ul>
					</li>
					<li><a href="kal.html">Przeliczenia</a>
						<ul>
							<li><a href="#">Przeliczenia Fizyczne</a></li>
							<li><a href="astrokal.html">Przeliczenia Astromiczne</a></li>
							<li><a href="#">Przeliczenia Matematyczne</a></li>
							<li><a href="#">Problemy</a></li>
						</ul>
					</li>
					<li><a href="inne.html">Inne</a>
						<ul>
							<li><a href="#">Chemia</a></li>
							<li><a href="#">Biologia</a></li>
							<li><a href="#">Geografia</a></li>
							<li><a href="#">Matematyka</a></li>
						</ul>
					</li>
				</ol>
			</div>
			<div id="content">

				<div id="latas">
					
					<p>Lata świetlne(l.y)</p>
					
					<input type="text" id="pole1">
				
					<input type="submit" value="Przelicz" onclick=licz();><br /><br /><br /><br /><br /><br />
										
					<script src="JS/lataswietlne.js"></script>
					
				</div>
					
				<div id="au" >
					
					<p>Jednostki astronomiczne(au)</p>
					
						<input type="text" id="pole2">
						
						<input type="submit" value="Przelicz" onclick=liczba();><br /><br /><br /><br /><br /><br />
						
						<script src="JS/astronomiczne.js"></script>
					
				</div>
				
				<div id="parsek">
				
					<p>Parseki(pc)</p>
					
					<input type="text" id="pole3">
					
					<input type="submit" value="Przelicz" onclick=przelicz();><br /><br /><br /><br /><br /><br />
				
					<script src="JS/pc.js"></script>
				
				</div>
					
			</div>
			<div id="social">
				<div id="socialdivs">
					<a target="blank" href="#" onclick="window.open('https://facebook.com/share?text=Technologie%20tworzenia%20witryn%0D%0A&nbsp;&amp;url=http://miroslawzelent.pl/informatyka%2Ftechnologie-tworzenia-witryn/','twitter','width=600,height=300,left='+(screen.availWidth/2-375)+',top='+(screen.availHeight/2-150)+'');return false;"  class="btn-share-md">
					<div class="fb"><i class="icon-facebook"></i></div>
					</a>
					<a target="blank" href="#" onclick="window.open('https://twitter.com/share?text=Technologie%20tworzenia%20witryn%0D%0A&nbsp;&amp;url=http://miroslawzelent.pl/informatyka%2Ftechnologie-tworzenia-witryn/','twitter','width=600,height=300,left='+(screen.availWidth/2-375)+',top='+(screen.availHeight/2-150)+'');return false;"  class="btn-share-md">
						<div class="tw"><i class="icon-twitter"></i></div>
					</a>
					<a target="blank" href="#" onclick="window.open('https://plus.google.com/share?text=Technologie%20tworzenia%20witryn%0D%0A&nbsp;&amp;url=http://miroslawzelent.pl/informatyka%2Ftechnologie-tworzenia-witryn/','twitter','width=600,height=300,left='+(screen.availWidth/2-375)+',top='+(screen.availHeight/2-150)+'');return false;"  class="btn-share-md">
					<div class="gplus"><i class="icon-gplus"></i></div>
					</a>
					<div style="clear: both"></div>
				</div>
			</div>
			
			<div id="footer">
				Astronomium.com &copy; 2016 This small step for man one giant for humanity
			</div>
			
			<script src="JS/jquery-3.1.1.min.js"></script>
		
	<script>

	$(document).ready(function() {
	var NavY = $('.nav').offset().top;
	 
	var stickyNav = function(){
	var ScrollY = $(window).scrollTop();
		  
	if (ScrollY > NavY) { 
		$('.nav').addClass('sticky');
	} else {
		$('.nav').removeClass('sticky'); 
	}
	};
	 
	stickyNav();
	 
	$(window).scroll(function() {
		stickyNav();
	});
	});
	
</script>
			
</body>
</html>

 

CSS:

Spoiler

body
{
  background-color:#303030;
  font-family: 'Lato', sans-serif;
  font-size:20px;
  color:#ffffff;
  margin: 0 !important;
}

#wrapper
{
  width:100%;
}

#header
{
  width:100%;
  padding: 40px 0;
}

#logo
{
  width:450px;
  font-size:48px;
  margin-left:auto;
  margin-right:auto;
}

.nav
{
  width: 100%;
  padding: 10px 0;
  background-color: #c34f4f;
  text-align: center;
  border-top: 1px solid #751b1b;
  border-bottom: 1px solid #751b1b;
}
#content
{
  width:1000px;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  padding-top: 10px;
}

#social
{
  width: 100%;
  text-align: center;
  background-color: #292929;
}

#socialdivs
{
  width:750px;
  margin-left: auto;
  margin-right: auto;
}

.fb
{
  width:250px;
  height:155px;
  float:left;
}

.fb:hover
{
  background-color: #4668b3;

}

a.facebook
{
  color: #ffffff;
  text-decoration: none;
  display:block;
}

.tw
{
  width:250px;
  height:155px;
  float:left;
}

.tw:hover
{
  background-color: #3095d3;

}
a.twitter
{
  color: #ffffff;
  text-decoration: none;
  display: block;
}

.gplus
{
  width:250px;
  height:155px;
  float:left;
}

.gplus:hover
{
  background-color: #d95333;

}

a.Googleplus
{
  color: #ffffff;
  text-decoration: none;
  display: block;
}

#footer
{
  text-align: center;
  background-color: #222222;
  padding: 30px;
}

.sticky
{
  width:100%;
  position:fixed;
  left: 0;
  top: 0;
  z-index: 100;
}

ol
{
  padding: 0;
  margin: 0;
  list-style-type: none;
  font-size: 18px;
  height: 35px;
  line-height: 200%;
  display: inline-block;
}

ol a
{
  color: #ffffff;
  text-decoration: none;
  display: block;
}

ol > li
{
  float: left;
  width: 150px;
  height: 40px;
  border-right: 1px dashed #751b1b;
}

ol > li:first-child
{
  border-left: 1px dashed #751b1b;
}

ol > li:hover
{
  background-color: #cf6969;
}

ol > li:hover > a
{
  color: #451717;
}

ol > li >ul
{
  list-style-type: none;
  padding: 0;
  margin: 0;
  height:40px;
  display: none;
}

ol > li:hover > ul
{
  display: block;
}

ol > li > ul > li
{
  background-color: #cf6969;
  position: relative;
  z-index: 100;
  border-top: 1px dashed #751b1b;
}

ol > li > ul > li:hover
{
  background-color: #c34f4f;
}

ol > li > ul > li:hover > a
{
  color: #451717;
}

.btn-share-md
{
  color: #fff;
}

#latas
{
  background-color: #303030;
  width: 300px;
  padding: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
}

input[type=text]
{
  width: 300px;
  background-color: #fff;
  color: #000;
  border: 2px solid #666;
  border-radius:5px;
  font-size: 20px;
  padding: 5px;
  border-sizing: border-box;
  outline: none;
  margin-top: 10px;
}

input[type=text]:focus
{
  -webkit-box-shadow: 0px 0px  10px 2px rgba(204, 204, 204, 0.9);
  -moz-box-shadow: 0px 0px  10px 2px rgba(204, 204, 204, 0.9);
  box-shadow: 0px 0px  10px 2px rgba(204, 204, 204, 0.9);
  border: 2px solid #e9f3e9;
  color:  #1a1a1a;
}

input[type=submit]
{
  width: 314px;
  background-color: #0000ff;
  font-size: 20px;
  color: #000;
  padding: 5px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 2px;
  outline: none;
  margin-top: 10px;
}

input[type=submit]:hover
{
  background-color: #1111ff;
}

input[type=submit]:focus
{
  -webkit-box-shadow: 0px 0px  10px 2px rgba(204, 204, 204, 0.9);
  -moz-box-shadow: 0px 0px  10px 2px rgba(204, 204, 204, 0.9);
  box-shadow: 0px 0px  10px 2px rgba(204, 204, 204, 0.9);
  border: 2px solid #0000ff;
  color:  #1a1a1a;
}

#au
{
  background-color: #303030;
  width: 300px;
  padding: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
}

#parsek
{
  background-color: #303030;
  width: 300px;
  padding: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
}

 

JavaScript:

Spoiler

function licz(){
	var x = document.getElementById("pole1").value;
	var y = 9460730500000000;
	var z = 63241; 
	var v = 0.3066;
	var u = x * y / 1000;
	var t = x * y / 1000000; 
	var w = 1;
	
	document.write((x * y)+" m"+"<br />"+u+" km"+"<br />"+t+" Mm"+"<br />"+(x * z)+" au"+"<br />"+(x * v)+" pc"+"<br />"+(x * w)+" l.y");
}

function liczba(){
	var liczbanow = document.getElementById("pole2").value;
	var banow = 149597870700;
	var nobaw = 63241;
	var par = 206265;
	var pas = liczbanow / 1;
	var now = liczbanow * banow;
	var bow = liczbanow * nobaw;
	var sek = liczbanow * par;
	var f1 = liczbanow * banow / 1000; 
	var f2 =  liczbanow * banow / 1000000;
	
	document.write(now+" m"+"<br / >"+f1+" km"+"<br />"+f2+" Mm"+"<br />"+bow+" l.y"+"<br />"+sek+"  pc"+"<br />"+pas+" au");
}

function przelicz(){
	var a = document.getElementById("pole3").value;
	var b = 30857118598800000;
	var d = 3.2616; 
	var f = 206265;
	var h = 1;
	var j = a * b / 1000; 
	var m = a * b / 1000000;
	var c = a * b;
	var e = a * d;
	var g = a * f;
	var i = a * h;

	document.write(c+" m"+"<br />"+j+" km"+"<br />"+m+" Mm"+"<br />"+e+" l.y"+"<br />"+g+" au"+"<br />"+i+" pc");	
}

 

Ukryta zawartość

    Zareaguj na post lub odpowiedz w temacie aby zobaczyć ukrytą zawartość.

Ukryta zawartość

    Zareaguj na post lub odpowiedz w temacie aby zobaczyć ukrytą zawartość.

Ukryta zawartość

    Zareaguj na post lub odpowiedz w temacie aby zobaczyć ukrytą zawartość.

Ukryta zawartość

    Zareaguj na post lub odpowiedz w temacie aby zobaczyć ukrytą zawartość.

Ukryta zawartość

    Zareaguj na post lub odpowiedz w temacie aby zobaczyć ukrytą zawartość.

Ukryta zawartość

    Zareaguj na post lub odpowiedz w temacie aby zobaczyć ukrytą zawartość.

Odnośnik do komentarza
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij

×