0

Could someone help me with this problem? from decimal to binary is already working, but I couldn't get it working from decimal to hexadecimal. I am not allowed to use toString so I don't have any idea what to do, do someone has any tips? that would be very helpful!! I've seen other posts but there they're talking about toString but am not allowed to use that because that makes it too easy when you use that.

function omzetten() {
  var invoer = document.getElementById('omzettenInvoer').value;
  var talstelselVan = document.getElementById('omvettenVan').value;
  var gewenstgetal = document.getElementById('gewenstgetal').value;
  var waarde = 1;
  var positie = invoer.length - 1;
  var som = 0;
  while(positie >= 0) {
    var cijfer = invoer.charAt(positie);
 var poswaarde;
if(cijfer == "a") {
  poswaarde = 10 * waarde
} else if(cijfer == "b") {
  poswaarde = 11 * waarde
} else if(cijfer == "c"){
  poswaarde = 12 * waarde
} else if(cijfer == "d") {
  poswaarde = 13 * waarde
} else if(cijfer == "e") {
  poswaarde = 14 * waarde
} else if(cijfer == "f") {
  poswaarde = 15 * waarde
} else {
    poswaarde = cijfer * waarde;
}
 som = som + poswaarde;
    positie--;
    waarde = waarde * talstelselVan;
    var som2 = som * gewenstgetal;
 
 //code for output2 here
 

  document.getElementById('output1').value = som;
    //document.getElementById('output2').value = ant2;

}}
/*phone*/
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
.topnav {
    background-color: #10689A;
    overflow: hidden;
}
#calcie {
  margin-left: 19.5vw !important;
  text-align: center;
  background-color: grey;
  border: solid grey;
  width: 50vw;
  border-radius: 2em;
}
input[type="text"] {
  width: 40vw !important;
}
header {
  display: none;
}
#bobies {
  width: 20vw;
  position: absolute;
  margin-left: 40vw;

}
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #10689A;
    color: black;
}


.active {
    background-color: #4CAF50;
    color: white;
}

.topnav .icon {
    display: none;
}
#desktop {
 display:none;
}
#home{
    margin-left: 2vw;
}
#logo {
margin-top: 20%;
position:absolute;
}

#welkomstekst{
    background-color: #10689A;
    width: 70vw;
    margin-left: 15vw;
    text-align: center;
    padding: 20px;
    margin-top: 10vh;
    line-height: 1.9;
    border-radius: 2em;
}

#welkomstekst p{
    color: white;
    font-size: 5vw;
}

#toekomstreferencie{
    width: 40vw;
    height: 10vh;
    margin-left: 28vw;
    margin-top: 3vh;
    background-color: #10689A;
    border-radius: 2em;
    margin-bottom: .9em;

}

#toekomstreferencie button{
    width: 32vw;
    height: 4vh;
    margin-left: 4vw;
    margin-top: 3vh;
    border-radius: 2em;
}
header {
  width: 86.5vw;
  margin-left: 30%;
}
footer{
    margin-top: 10vw;
}
#biggie {
  max-width: 2vw;}}

/*Tablet*/
@media screen and (min-width: 601px) {
 #phone {
  display:none;
 }
#Navbar {
    background-color: #10689A;
    width: 99vw;
    height: 120px;
    min-width:: 500px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#Navbar a{
    color: white;
    font-size: 15px;
    margin-top: 30px;
    margin-right:10%;}

#Navbar img{
    width:5vw;
    height: 5vw;
    Margin-top: -5px;
}
#calcie {
  margin-left: 37.5vw !important;
  text-align: center;
  background-color: grey;
  border: solid grey;
  width: 14vw;
  border-radius: 2em;
}
input[type="text"] {
  width: 10vw !important;
}
#desktop {
  display: flex;
  flex-wrap: nowrap;}

#home{
        margin-left: 2vw;}


#logo {
 margin-top: 20%;
 position:absolute;
}

    #welkomstekst{
        background-color: #10689A;
        width: 50vw;
        margin-left: 25vw;
        text-align: center;
        padding: 20px;
        margin-top: 4vh;
        line-height: 1.9;
        border-radius: 2em;
    }

    #welkomstekst p{
        color: white;
        font-size: 2vw;
    }

    #toekomstreferencie{
        width: 15vw;
        height: 10vh;
        margin-left: 42vw;
        margin-top: 3vh;
        background-color: #10689A;
        border-radius: 2em;
        margin-bottom: .9em;

    }

    #toekomstreferencie button{
        width: 11vw;
        height: 4vh;
        margin-left: 2.0vw;
        margin-top: 3vh;
        border-radius: 2em;

    }
    header {
      width: 86.5vw;
      margin-left: 30%;
    }
    footer{
        margin-top: 10vw;
    }
    #biggie {
      max-width: 2vw;
    }
}
/*Desktop*/
@media screen and (min-width: 1250px) {
 #phone {
  display:none;
 }
#Navbar {
    background-color: #10689A;
    width: 99vw;
    height: 120px;
    min-width:: 500px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#Navbar a{
    color: white;
    font-size: 15px;
    margin-top: 30px;
    margin-right:10%;

}
#calcie {
  margin-left: 37.5vw !important;
  text-align: center;
  background-color: grey;
  border: solid grey;
  width: 13vw;
  border-radius: 2em;
}
input[type="text"] {
  width: 10vw !important;
}

#Navbar img{
    width:5vw;
    height: 5vw;
    Margin-top: -5px;
}
#desktop {
  display: flex;
  flex-wrap: nowrap;
}

    #home{
        margin-left: 2vw;
    }


#logo {
 margin-top: 20%;
 position:absolute;
}

    #welkomstekst{
        background-color: #10689A;
        width: 50vw;
        margin-left: 25vw;
        text-align: center;
        padding: 20px;
        margin-top: 4vh;
        line-height: 1.9;
        border-radius: 2em;
    }

    #welkomstekst p{
        color: white;
    }

    #toekomstreferencie{
        width: 15vw;
        height: 10vh;
        background-color: #10689A;
        border-radius: 2em;
        display: grid;
        grid-area: grid;
        grid-template-columns: auto;
        grid-template-areas: 'grid';
        margin-bottom: .9em;

    }


    #toekomstreferencie button{
        width: 7vw;
        height: 4vh;
        margin-left: 3.7vw;
        margin-top: 3vh;
        font-size: 1.2vw;
        border-radius: 2em;

    }
    header {
      width: 46.5vw;
      margin-left: 30%;
    }
    footer{
        margin-top: 10vw;
    }
    #biggie {
      max-width: 2vw;
    }
    #buttie {
      min-width: 9vw;
      margin-left: 3vw !important;
    }
}

/*HD (High defenition)*/
@media screen and (min-width: 1800px) {
  #bigmama1 {
    width: 20vw;
    height: 10vw;
    position: absolute;
  background-color: #10689A;
  margin-left: 19vw;
  margin-top: 4vw;
  padding-left: 1.3vw;
  }
  #bigmama2 {
    width: 11vw;
    height: 10vw;
    position: absolute;
  background-color: #10689A;
  margin-left: 24vw;
  margin-top: 20vw;
  }
  #id1{
    margin-left: 22vw;
    margin-top: 2vw;
    position: absolute;
  }
  #nassi,
  #nabr[type="text"] {
    max-width: 2vw;
  }
  #id2{
position: absolute;
margin-left: 26.5vw;
margin-top: 18vw;
  }
#output1 {
  margin-top: .5vw;
  width: 17.1vw !important;
  text-align: center;
  height: 7vw;
  overflow: auto;
}
 #phone {
  display:none;
 }
#Navbar {
    background-color: #10689A;
    width: 99vw;
    height: 120px;
    min-width:: 500px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#Navbar a{
    color: white;
    font-size: 15px;
    margin-top: 30px;
    margin-right:10%;
}
#calcie {
  margin-left: 24.5vw !important;
  text-align: center;
  background-color: grey;
  border: solid grey;
  width: 9vw;
  border-radius: 2em;
}
input[type="text"] {
  width: 7vw !important;
}
#Navbar img{
    width:5vw;
    height: 5vw;
    Margin-top: -5px;
}
#desktop {
  display: flex;
  flex-wrap: nowrap;
}

    #home{
        margin-left: 2vw;
    }
#logo {
 margin-top: 20%;
 position:absolute;
}

    #welkomstekst{
        background-color: #10689A;
        width: 50vw;
        margin-left: 25vw;
        text-align: center;
        padding: 20px;
        margin-top: 4vh;
        line-height: 1.9;
        border-radius: 2em;
    }

    #welkomstekst p{
        color: white;
    }
    #toekomstreferencie{
        width: 15vw;
        height: 8vh;
        background-color: #10689A;
        border-radius: 2em;
        display: grid;
        grid-area: grid;
        grid-template-columns: auto;
        grid-template-areas: 'grid';
        margin-bottom: .9em;

    }


    #toekomstreferencie button{
        width: 7vw;
        height: 4vh;
        margin-left: 3.7vw;
        margin-top: 3vh;
        font-size: 1.2vw;
        border-radius: 2em;

    }
    header {
      width: 46.5vw;
      margin-left: 36%;
    }
    footer{
        margin-top: 10vw;
    }
    #biggie {
      max-width: 2vw;
    }
    #buttie {
      min-width: 9vw;
      margin-left: 3vw !important;
    }
}



#bobie {
  width: 3vw !important;
}

.nav-item {
  padding-top: 1.4vw;
}
.dropdown {
  max-width: 10vw;
  float: right;
  padding-top: 1.7vw;
}

.Fibo{
     background-color: #10689A;
        width: 50vw;
        margin-left: 5vw;
        text-align: center;
        padding: 20px;
        margin-top: 4vh;
        line-height: 1.9;
        border-radius: 2em;
    }
#dReeksP{
color: white;
}

#dReeksF{
color: white;
}
#output2{
  margin-left: 12.9vw;
}
<!DOCTYPE HTML>
<html lang="en">
    <head>
 <script type="text/javascript" src="js/java.js"></script>
        <link href="CSS/style.css" rel="stylesheet" type="text/css">
    <meta charset="UTF-8">
  <meta name="description" content="Opdracht">
  <meta name="keywords" content="Opdract">
  <meta name="author" content="Alexander & Ravi">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <header>
       <div id="desktop">
      <ul  class="nav nav-tabs auto-fill">
        <li class="nav-item">
          <a class="nav-link active" href="index.html"><img id="bobie" src="IMG/calculatorlogo.png"></a>
        </li>
<li class="nav-item">
  <a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
  <a  class="nav-link active" href="#">Rad van fortuin</a>
  <li class="nav-item">
    <a  class="nav-link active" href="#">Shoot the pig</a>
  </li>
</li>
<div class="dropdown">
    <button  class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Rekenen
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
    <li><a href="#">Rekenpagina</a></li>
    <li><a href="#">Gevorderd rekenpagina</a></li>
    <li><a href="#">reeksen</a></li>
    <li><a href="#">Omrekenen</a></li>
</ul>
  </div>
  </ul>
</div>
</header>
    <body>
  <section id="phone">
      <img id="bobies" src="IMG/calculatorlogo.png">
<div class="topnav" id="myTopnav">
  <a href="index.html" class="active">Home</a>
  <a href="">Rekenpagina</a>
  <a href="">Gevordend Rekenpagina</a>
  <a href="">Reeksen</a>
  <a href="">Omrekenen</a>
  <a href="">Rad van fortuin</a>
  <a href="">Shoot the pig</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>
</section>
<div id="minis">
        <div id="welkomstekst">
   <p>Welkom bij <strong>Math-mate m2</strong> hier kan je:<br>
    lekker <strong>rekenen met hexa</strong></br>
     eigen manier, heb je na het <strong>rekenen</strong></br>
   zin in wat ontspanning speel shoot the pig!</p>
            </div>
          </div>
        <div id="toekomstreferencie" ><button id="buttie" onclick="toggle_visibility('minis')" href="#slides" data-toggle="collapse">Hexa's</button></div>
        <div class="collapse" id="slides">
          <div class="container">
<h3 id="id1">Binair naar hexadecimaal</h3>
<div id="bigmama1">
<form>
 <input type="text" value"" id="omzettenInvoer" placeholder="Waarde" value="1010"/>
 <input type="number" value"" id="omvettenVan" placeholder="tal" value="2" />
 <button type="button" id="arie" value""  name="-->" disabled>--></button>
 <input type="text" value"" id="gewenstgetal" placeholder="tal"/>
 <button type="button" value="verzenden" onclick="omzetten()">Bereken</button></br>
 <input type="text" value"" id="output1"  name="input"/>
 <input type="text" value"" id="output2"  name="input"/>
</form>
</div>
<h3 id="id2">Factorizer</h3>
<div id="bigmama2">
  <form>
<input type="text" value"" id="getalie" placeholder="Hier invullen" name="input"/>
<button type="button" value="verzenden" onclick="he()">Bereken</button>
</form>
</div>
      </div>
      </div>
      <footer>
   <p> &copy; Ravi Breugom en Alexander wallaard</p>
    </footer>
    </body>
</html>
Sh. Pavel
  • 1,584
  • 15
  • 28
Alexander Wallaard
  • 13
  • 4
  • 1
    You know the basic math behind such a “conversion”, right? – CBroe Jun 21 '18 at 11:30
  • You need to manually convert Dec to Hex? – Alex Jun 21 '18 at 11:30
  • advanced math in my first school year? nah CBroe – Alexander Wallaard Jun 21 '18 at 11:30
  • This is the ultimate throwback to first year in college. – Alex Jun 21 '18 at 11:31
  • @Alex I think they forgot to mention this specific requirement/restriction put on their homework assignment when they asked about it the first time an hour ago, https://stackoverflow.com/q/50965407/1427878 … – CBroe Jun 21 '18 at 11:31
  • @alex yea the output of the first one needs to be converted in hexa'x16' without using toString but i don't know how :o – Alexander Wallaard Jun 21 '18 at 11:32
  • This isn't homework @Cbroe it's a year project, they say i need to find it out somehow so if i can't find answers myself why not asking someone if i don't understand? – Alexander Wallaard Jun 21 '18 at 11:33
  • Do you know how base to base conversions works? E.g. Decimal to Binary, Decimal to Octal, Reversed? – Alex Jun 21 '18 at 11:33
  • The math behind this is pretty basic, so I’d suggest you go read up on it if you are really still unfamiliar with how this works. Otherwise, your question shows way to little effort to solve the problem yourself so far – CBroe Jun 21 '18 at 11:34
  • _“they say i need to find it out somehow”_ - by that “they” likely meant that you should go and make a reasonable effort to inform yourself in the first place, and not just have someone else tell you the solution. – CBroe Jun 21 '18 at 11:35
  • A good place to start would be [`Decimal to Hexidecimal`](https://www.permadi.com/tutorial/numDecToHex/) – Alex Jun 21 '18 at 11:35
  • @CBroe believe me, staying up all night staring to this problem with my hands in my hair, it's my first year in programming school so i don't know that much yet – Alexander Wallaard Jun 21 '18 at 11:36
  • @AlexanderWallaard Relax. We've all been there or closely similar. The link I provided above does a GREAT job explaining. – Alex Jun 21 '18 at 11:38
  • 1
    Take a step back, and leave the “programming” out of it for now - and go read up on the _math_ of converting between different bases first. Understanding that is the first step, before you start actually implementing it. – CBroe Jun 21 '18 at 11:38
  • @AlexanderWallaard Do you need a function e.g. `function dec2hex(40)` would return 28? – Alex Jun 21 '18 at 11:39
  • 1
    thanks everyone , Thanks @Alex & CBroe for you'r help :D – Alexander Wallaard Jun 21 '18 at 11:41

1 Answers1

0

I have written a solution for you, but prior to copying and pasting, read up on how conversions work.

The code below works with any base between 2-36 and does not use .toString();

function dec2base(int, base) {
  let letters = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
  let returnVal = "";
  if (base > 1 && base < 37) {
    while (int != 0) {
      rest = int % base;
      int = Math.floor(int / base);
      returnVal = letters[rest] + returnVal;
    }
  }
  return returnVal;
}

console.log(dec2base(255, 16));
Alex
  • 2,164
  • 1
  • 9
  • 27