1

I hope to make myself understood. I'm very bad at the subject of regular expressions. I'm trying to show the numbers from 0 to 9. But for now I need to show only the number 0 as shown here.

enter image description here

How can I generate it from javascript? Excuse my ignorance, I think I'm doing it wrong and I do not know if I should use ...

Do not think that I have not tried my best, seriously I do not know how to manage to show the number zero correctly.

var myPre = document.getElementById("pre");

myPre.innerHTML = "|  -- <br> |"
<div id="pre">

</div>
Sanchit Patiyal
  • 4,910
  • 1
  • 14
  • 31
unusuario
  • 151
  • 1
  • 13

2 Answers2

1

You're going to want a monospace font, you're going to have to use the underscore rather than the hyphen, and you're going to have to bear in mind the effect of the space on the first line...

var myPre = document.getElementById("preformatted");

myPre.innerHTML = " __<br/>|  |<br/>|__|<br/>"
#preformatted {
    font-family: monospace;
    white-space: pre;
}
<div id="preformatted">

</div>

And, just for grins...

// Save references to my two control elements.
var myPre = document.getElementById("preformatted");
var numInput = document.getElementById("numInput");

// Create an array of the numbers 0 through 9 as 7 segment digits.
var numberStrings = [
 " __ <br/>|  |<br/>|__|<br/>",
 "    <br/>   |<br/>   |<br/>",
 " __ <br/> __|<br/>|__ <br/>",
 " __ <br/> __|<br/> __|<br/>",
 "    <br/>|__|<br/>   |<br/>",
 " __ <br/>|__ <br/> __|<br/>",
 " __ <br/>|__ <br/>|__|<br/>",
 " __ <br/>   |<br/>   |<br/>",
 " __ <br/>|__|<br/>|__|<br/>",
 " __ <br/>|__|<br/> __|<br/>"];

// Attach the listeners for the input changes.
numInput.addEventListener("keyup", changeNumbers);
numInput.addEventListener("change", changeNumbers);

function changeNumbers(){
  // Simply use the element from the array associated with
  //  the entered number to update the preformatted display.
  myPre.innerHTML = numberStrings[numInput.value];
}
#preformatted {
    font-family: monospace;
    white-space: pre;
    padding: 5px;
    margin: 5px;
    border: 1px dotted red;
    width: 50px;
    height: 50px;
    position: relative;
    text-align: center;
}
label {
  display: block;
}
<div id="preformatted">

</div>

<div class="number-entry-pane">
<label>Enter a digit:
<input type="number" id="numInput" min=0 max=9 /></label>
Snowmonkey
  • 3,716
  • 1
  • 16
  • 16
0

I think this is what you are trying to do.

document.write("<pre> ______</pre>");
for(i=0;i<6;i++) {
  document.write("<pre>|      |</pre>")
}
document.write("<pre> ______</pre>");
kapil upadhyay
  • 1
  • 1