How to route the value of a JS variable to an HTML Div?

Question

Hey guys I'm totally new here and need help on an assignment. Last week we created a simple JS program that converts decimal to binary (without using parseint). The new assignment is to prompt the user for a decimal number, then display the resulting binary number in 8 separate div elements.

Although there might have been a more succinct way to do the conversion, here is what I did within javascript. For clarification I named the variables with respect to their corresponding base two power (2^7 place, 2^6 place, etc)

var seven = 0;
var six = 0;
var five = 0;
var four = 0;
var three = 0;
var two = 0;
var one = 0;
var zero = 0;

var input = document.getElementById("dec").value;

if (input < 128) {
  seven = 0;
}

if (input > 128) {
  input = input % 128;
  seven = 1;
}

if (input < 64) {
  six = 0;
}

if (input > 64) {
  input = input % 64;
  six = 1;
}

if (input < 32) {
  five = 0;
}

if (input > 32) {
  input = input % 32;
  five = 1;
}

if (input < 16) {
  four = 0;
}

if (input > 16) {
  input = input % 16;
  four = 1;
}

if (input < 8) {
  three = 0;
}

if (input > 8) {
  input = input % 8;
  three = 1;
}

if (input < 4) {
  two = 0;
}

if (input > 4) {
  input = input % 4;
  two = 1;
}

if (input < 2) {
  one = 0;
}

if (input > 2) {
  input = input % 2;
  one = 1;
}

if (input < 1) {
  zero = 0;
}

if (input = 1) {
  zero = 1;
}

Here is what I've done in html. (We use codepen.io, which does not require body tags)

<form>
  <input type="number" id="dec" min="0" max="255" step="1" />
</form>

<div id="seventh">0</div>
<div id="sixth">0</div>
<div id="fifth">0</div>
<div id="fourth">0</div>
<div id="third">0</div>
<div id="second">0</div>
<div id="first">0</div>
<div id="zeroth">0</div>

So getting down to the real question, once the user inputs a decimal number and I have the binary units saved to their corresponding variables, how do I route the value of these variables to the div elements I created in HTML?

Thanks so much for your help guys.

Answer 1

plain javascript

document.getElementById("seventh").innerHTML = "ayo new text";

jquery

$('#seventh').text("ayo new text");

and since your going to be using variables substitute the string for that var.

document.getElementById("seventh").innerHTML = yourVar;

Answer 2

Since this is a homework question (and thanks for being up front about that), I'll post a way to find your answer instead of just the answers. Learning is all about discovery.

What you're trying to do is change the textContent of a DOM node. This is pretty central to a lot of features of javascript applications, so it's useful to know the ins and outs.

A great starting place is always MDN. MDN has phenomenal documentation for a lot of the technologies in the browser, and it's an invaluable resource for DOM and JavaScript.

If you search for textContent on MDN, it should show you some results that might link you to the docs for Node.textContent.

Elements in the DOM inherit from Node, so this is a good page to keep in your back pocket.

You'll notice in your code you have getElementById() which, as the name implies, will return an HTML Element.

Back to the Node.textContent page: note the sections titled "Differences from innerText" and "Differences from innerHTML". It would be wise to scan these sections so you understand the differences.

Answer 3

you get the element instance via document.getElementId("elementname/id") then use the .innerHTML attribute to change the value of it