Jak wyciągnąć z elementu tylko liczby? JS

pytanie zadane 17 stycznia 2018 w JavaScript przez Jakub Radziejewski Obywatel (1,090 p.)
edycja 17 stycznia 2018 przez Jakub Radziejewski

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kalkulator</title>
    <link href="style.css" href="text/css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Joti+One|Sedgwick+Ave+Display" rel="stylesheet">
		<style>
		*{
			margin: 0;
			padding: 0;
		}

		body
		{
			background-color: #8DCDE3;
			font-family: 'Sedgwick Ave Display', cursive;
		font-family: 'Joti One', cursive;
		zoom: 2;
		 -moz-transform: scale(2);
		 -moz-transform-origin: 0 0;
		 background: url(weather.png);
		}

		.button1{
			float: left;
			padding: 5px;
			margin-right: 2px;
		}

		#wynik{
			margin-top: 20px;
			margin-bottom: 20px;
		}

		#page{
			margin: 0 auto;
			width: 30%;
			margin-top: 50px;
		}

		#inputs{
			margin-left: auto;
			margin-right: auto;
		}

		fieldset{
			width: 250px;
			border: 1px solid #dcdcdc;
			border-radius: 10px;
			padding: 10px;
			text-align: center;
			margin-left: auto;
			margin-right: auto;
		}
		legend{
			background-color: #efefef;
			border: 1px solid #dcdcdc;
			border-radius: 10px;
			text-transform: uppercase;
				font-family: 'Sedgwick Ave Display', cursive;
			padding: 3px;
		}
		#wynik{
		 font-family: !important'Joti One', cursive;
		}

		p{
			margin:5px 10px;
		}

		#buttons{
			width: auto;
			height: auto;
			margin-top: 10px;
		}

		.button1{
			border-radius: 5px;
			background-color: #599EB5;
			border-color: #4D93AB;
			float: none;
			margin-left: auto;
			margin-right: auto;
			display: block;
			width: 125px;
			margin-top: 3px;
			cursor: pointer;
			font-family: !important'Joti One', cursive;
		}
		.button1:hover{
			background-color: #488DA4;
			border-color: #3C82AA;
			transform: scale3d(1.01, 1.01, 1.01);
		}

		.button1:focus {
			outline:none;
				font-family: !important'Joti One',
		}

		</style>
  </head>
  <body>
<div id="page">
  <div id="inputs">
    <fieldset>
      <legend>Obliczanie</legend>
        <p>First number</p><input type="number" id="a" name="fnumber" />
        <p>Second nubmer</p><input type="number" id="b" name="snumber" />
        <div id="wynik"></div>
    </fieldset>
 </div>
 <div id="buttons">
        <input type="button" value="DODAWANIE" id="dod" class="button1" onclick="oblicz(1)">
        <input type="button" value="ODEJMOWANIE" id="odej" class="button1" onclick="oblicz(2)">
        <input type="button" value="MNOZENIE" id="mno" class="button1" onclick="oblicz(3)">
        <input type="button" value="DZIELENIE" id="dziel" class="button1" onclick="oblicz(4)">
        <div style="clear:both"></div>
</div>
      <script>
			function oblicz(oblicz){

			  var a = document.getElementById('a').value;
			  var b = document.getElementById('b').value;

			  var msgWynik = "Wynik działania wynosi: ";

			  if (a == "" || b == "") {
			    var msg = "Uzupełnij oba pola";
			    document.getElementById('wynik').innerHTML = msg;
			  } else {
			    a = parseFloat(a);
			    b = parseFloat(b);

			    switch (oblicz) {
			      case 1:
			          document.getElementById('wynik').innerHTML = msgWynik + (a + b);
			      break;

			      case 2:
			      document.getElementById('wynik').innerHTML = msgWynik + (a - b);
			      break;

			      case 3:
			      document.getElementById('wynik').innerHTML = msgWynik + (a * b);
			      break;

			      case 4:
			      if (b==0)
			      //if (b ==0 || a==0)
			      {
			        var msgDziel = "Nie wolno dzielić przez 0";
			        document.getElementById('wynik').innerHTML = msgDziel;
			      } else
			      {
			        document.getElementById('wynik').innerHTML = msgWynik + (a / b);
			      }
			      break;
			    }
			  }
			}
</script>
</div>
  </body>
</html>

Kod może nie potrzebny, ale jest.

Chciałbym wyjąć z diva gdzie mam napis i liczbę samą wartość cyfrową.. (Chcę do kalkulatora dodać kolejny przycisk, który pozwoli na kontynuowanie obliczeń od wyniku)

Dla ciekawskich udało mi się to zrobić za pomocą funkcji substr()

link - http://kursjs.pl/kurs/super-podstawy/string.php (mniej więcej połowa strony)

      case 5:
      var text = document.getElementById('wynik').innerHTML;
      document.getElementById('a').value = text.substr(24, text.length, -24);
      document.getElementById('b').value = '';
      break;

komentarz 17 stycznia 2018 przez ScriptyChris Mędrzec (190,190 p.)

O którym divie mówisz? Jeśli chodzi Ci o #inputs, to w środku masz inputy [type="number"], które akceptują tylko liczby.

Natomiast jeśli masz string np. "Ala 1 ma 2 koty", to liczby wyciągniesz wyrażeniem regularnym korzystając z metody String.prototype.match.

3 odpowiedzi

odpowiedź 17 stycznia 2018 przez Artek Stary wyjadacz (11,800 p.)

Pierwsza myśl jaka przyszła mi do głowy do sprawdzanie po kolei wszystkich znaków.

komentarz 17 stycznia 2018 przez Jakub Radziejewski Obywatel (1,090 p.)

Hej dzięki za wskazówkę!

Jednak jak byś miał czas, mógłbyś rozwinąć myśl? Czy jest od tego już wbudowana funkcja?

komentarz 17 stycznia 2018 przez Artek Stary wyjadacz (11,800 p.)

Co do wbudowanej funkcji najlepiej byłoby poszukać w dokumentacji. Przeróżnych opisów znajdziesz w internecie mnóstwo(o ile ogarniasz angielski)

Co do rozwinięcia myśli to chodziło mi o pętle(chyba for najbardziej pasuje) i w każdym wykonaniu sprawdzasz kolejny znak z diva(po kolei oczywiście). Jeśli znak jest cyfrą to rób coś a jak nie to lecisz dalej.