Align numbers vertically inside scrollbar center

I have created a program where you can input a number, and it will count from 0 to the specified number. Currently, the numbers are aligned horizontally up to 12 before starting on a new line.

However, I would like the numbers to be arranged vertically from 0 to 9, followed by a new line next to the 0 for counting from 10 to 19, continuing until the specified value is reached.

 function action() {
   document.getElementById("container").innerHTML = "";
   var highest = document.getElementById("numbers").value;
   var count = 0;
   for (var i = 0; i < highest; i++) {
     document.getElementById("container").innerHTML += i + " ";
   }
 }
#container {
  overflow: scroll;
  height: 200px;
  width: 200px;
}
<input type="number" id="numbers">
<br>
<input type="button" onclick="action()" value="Submit">
<div id="container"></div>

Answer №1

It seems like this code snippet could be what you're searching for! Your question is a bit unclear, but I hope this solution fits your needs.

function action() {
var highest = document.getElementById("numbers").value;
var output="";
 for (var i = 0; i<highest; i++) {
  if(i>0&&(i % 10)==0){
// i is more than 0 and every 10(TH)
   output+="<br/>"+i+" ";
  }else{
     output+=i+" ";
  }
 }
document.getElementById("container").innerHTML=output;
}
<input type="number" id="numbers"><br>
<input type="button" onclick="action()" value="Submit">
<div id="container"></div>

If you have any queries regarding the provided code, feel free to drop a comment below, and I will respond promptly.

I trust this information proves helpful. Happy coding!

Answer №2

To implement this feature in CSS, you can use the properties writing-mode and text-orientation:

function displayNumbers() {
    var container = document.getElementById('container');
    var inputNumber = document.getElementById("numberInput").value;
    container.innerHTML = '';

    for (var i = 0; i < inputNumber; i++) {

        if (i < 10) {
           var newSpan = '<span>' + i + '</span>';
       }

       else {
           var newSpan = '<span class="double-digit">' + i + '</span>';
       }

        container.innerHTML += newSpan;
    }
}
body {
font-size: 24px;
}

input {
width: 100px;
}

#container {
margin-top: 1em;
height: 14em;
width: 14em;
font-size: 1em;
writing-mode: vertical-lr;
text-orientation: upright;
vertical-align: top;
}

#container span {
display: inline-block;
width: 1em;
height: 1em;
padding: 0.2em;
}

.double-digit {
position: relative;
top: -0.15em;
writing-mode: horizontal-tb;
}
<input type="number" id="numberInput">
<br>
<input type="button" onclick="displayNumbers()" value="Submit">
<div id="container"></div>

Answer №3

Instead of using a space in the loop, I decided to include a <br> tag which did the trick. Additionally, within the #container id, I added the line columns: 10px;, and it worked like a charm! :)

A big shoutout to @Pete for his help!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Expo: A guide on integrating expo code into an existing Android project

I'm looking to enhance my Android app (which is built in standard Java) by allowing users to create their own 3D models. To achieve this, I want to incorporate a 3D viewer within the app so that users can view and interact with their creations. My pl ...

Enhanced Compatibility of HTML5/CSS3 Modal Box with Internet Explorer

I'm experimenting with HTML5/CSS3 for the first time and have implemented a cool little link to display a dialog (modal) on one of my web pages. While this works perfectly in Chrome/Firefox, it unfortunately doesn't function properly in Internet ...

The specified class is not found in the type 'ILineOptions' for fabricjs

Attempting to incorporate the solution provided in this answer for typescript, , regarding creating a Line. The code snippet from the answer includes the following options: var line = new fabric.Line(points, { strokeWidth: 2, fill: '#999999', ...

What is the best method for creating a close button on the bottom right corner with Bootstrap?

I need help adjusting the position of a button in a flash message. How can I move the button to the bottom-right? <div class="alert alert-danger alert-dismissible fade show" role="alert"> <%= success %> ...

Displaying each character of text individually with jQuery

I am trying to display the text within a ul tag one by one when hovering over some text. However, I am encountering an error. How can I resolve this issue? You can view the code for mouseover functionality by hovering over the "hover here hover again" lin ...

What methods can I use to prevent floated child divs from wrapping?

I'm currently working on creating a carousel-like feature where users can select radio buttons within various div elements. The concept involves having approximately 20 divs, each 150px wide, containing radio buttons. I want to prevent these 20 divs f ...

Toggle the display of slide numbers in RMarkdown xaringan / reveal.js presentations

In preparation for a workshop, I am creating HTML slides using the xaringan package in R, which is based on remark.js. These slides are made with RMarkdown, and while this approach has been effective, I have encountered a need to disable slide numbers on s ...

Looking for an Icon to accompany the navigation bar on Bootstrap

Can anyone assist me with adding an icon next to the navbar starting from the word "Dashboard" without any spacing using only Bootstrap? Please note that I have tried options like offset-5 and ms-5 but they did not achieve the desired result. <div id=& ...

Setting a default value dynamically in a `select` control can be done by using JavaScript to

Upon subscribing to the HTTP server for data retrieval, my select control in Angular framework gets loaded with the received data. My objective is to set a default value that comprises three values from the server object separated by slashes ("/"), which r ...

Unusual HTML Structure (content misplaced or out of order?)

Recently, I started learning CSS/HTML in school and we just delved into Javascript. Currently, we are working on a website project. However, while trying to integrate the content with the navbar, I encountered a strange issue. When resizing to 620px or le ...

Creating CSS rounded corners with pseudo-elements

Take a look at this fiddle: https://jsfiddle.net/xnr7tqm1/ This is the html code I'm working with: <div class="media-container"> <iframe width="365" height="200" src="https://www.youtube.com/embed/JqjIb6FhU_k" frameborder="0" al ...

Tips for making jQuery DataTables switch between multiple DOM tables?

I am working on a project where I need to display different jQuery Datatables based on the selected option in a <select> element. The data for each Datatable is stored in hidden DOM <table> elements: <!-- Make sure jquery.dataTables.css and ...

Getting rid of quotes in a JSON result

My unique code snippet Retrieve data = Array[2] : 0:object id : "1" lat : "76.23" long:"21.92" 1:object id:"2" lat:"10.23" long:"12.92" var newCoords=[]; for(_i = 0; _i < ...

Display a vibrant welcome screen on an Android WebView that ensures a visually appealing experience while the content loads for the

When launching an application, the desired behavior is as follows: Display a splash screen while simultaneously loading a URL Upon the firing of a JavaScript interface event on page load, remove the splash screen Mainactivity.java myWebView.addJavascript ...

Symfony 2 lacks the ability to automatically create the web/bundle/framework structure

I encountered a major issue with Symfony. After installing Symfony 2.7.5 via the command line: $ symfony new my_project The problem arose in the generated project directory: /web/bundle In this folder, I found two empty files (not directories!) named fr ...

Applying a CSS border to a div that perfectly encloses a span, adjusting to the

My goal is to create a nested structure where a div contains a span element like this: ---------- |Sentence| ---------- ----------------- |It's a looooong| |sentence | ----------------- While it works well for short sentences, long ones end u ...

jQuery image resizing for elements

I have successfully adjusted the images in the gallery to display one per row for horizontal orientation and two per row for vertical orientation. Now, I am facing a challenge in making the images scalable so they can resize dynamically with the window. A ...

Clicking on the parent div with a Jquery onclick event does not trigger when the child image is clicked

I'm running into an issue with a simple code containing an image within a div Oddly enough, clicking on the div itself (even with padding) triggers the function, but clicking directly on the image does not. $(".parent0").click(function() { conso ...

Having trouble importing zone.js in Angular 14 and Jest 28

I am currently in the process of updating to Angular 14. Everything is going smoothly except for setting up jest. Since I have Angular 14 libraries included in my build, I need to utilize jest-ESM support. Below is my configuration: package.json { &qu ...

Code behind implementing a new System.Drawing.Font

Recently, I have been attempting to generate an image using the Black Rose font in c# but unfortunately, the output does not reflect the desired font. Below is the code snippet I used for creating the image: protected void Page_Load(object sender, Eve ...