Displayed below is a numeric output.
Is it possible to have a text-based output instead? If so, what steps should I follow to achieve this?
<label for=fader>Volume</label>
<input type=range min=0 max=100 value=50 id=fader step=1 oninput="outputUpdate(value)">
<output for=fader id=volume>50</output>
<script>
function outputUpdate(vol) {
document.querySelector('#volume').value = vol;
}
</script>It's uncertain if a simple html slider alone can achieve this, but adding some code to convert numbers to words could do the trick. I discovered a solution here, and by incorporating it, the following approach should work for you:
var th = ['', 'thousand', 'million', 'billion', 'trillion'];
var dg = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
var tn = ['ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'];
var tw = ['twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
function toWords(s) {
s = s.toString();
s = s.replace(/[\, ]/g, '');
if (s != parseFloat(s)) return 'not a number';
var x = s.indexOf('.');
if (x == -1) x = s.length;
if (x > 15) return 'too big';
var n = s.split('');
var str = '';
var sk = 0;
for (var i = 0; i < x; i++) {
if ((x - i) % 3 == 2) {
if (n[i] == '1') {
str += tn[Number(n[i + 1])] + ' ';
i++;
sk = 1;
} else if (n[i] != 0) {
str += tw[n[i] - 2] + ' ';
sk = 1;
}
} else if (n[i] != 0) {
str += dg[n[i]] + ' ';
if ((x - i) % 3 == 0) str += 'hundred ';
sk = 1;
}
if ((x - i) % 3 == 1) {
if (sk) str += th[(x - i - 1) / 3] + ' ';
sk = 0;
}
}
if (x != s.length) {
var y = s.length;
str += 'point ';
for (var i = x + 1; i < y; i++) str += dg[n[i]] + ' ';
}
return str.replace(/\s+/g, ' ');
}
function outputUpdate(vol) {
document.querySelector('#volume').value = toWords(vol);
}<label for=fader>Volume</label>
<input type=range min=0 max=100 value=50 id=fader step=1 oninput="outputUpdate(value)">
<output for=fader id=volume>Fifty</output>My code returns statusText: OK, but I am encountering issues retrieving PHP object or array values. I am using Fedora 30 with HTTPd 2.4.39, PHP 7.6, and MySQL 10.3.12. For jQuery, I have the latest version installed. In my PHP file, I have set the content ...
Currently, I am in the process of creating a website that allows users to download jpg, png, pdf, and docx files uploaded by an administrator. The file uploading functionality is working smoothly without any issues. Upon uploading a file, its name is stor ...
I have a data object where I'm storing various page settings, structured like this: var filters={ "brands":["brand1","brand2","brand3"], "family":"reds", "palettes":["palette1","palette2","palette3"], "color":"a1b2" }; This object is ...
Is there a way to properly position DIVs on top of a background image without them shifting when the screen size changes? Media Query hasn't been successful for me. Any suggestions? Here is my code: <div class="div-bg" style="background-image:url ...
Is it possible to adjust the site.css file in order to achieve a similar row spacing effect as Bootstrap 5 when working with existing HTML code? ...
One way that I am trying to change the background of a div is by using a function. Below is an example of the html code I am working with: $scope.Background = 'img/seg5en.png'; document.getElementById("Bstyle").style.background = "url("+$scope.B ...
I have a dilemma - my asp.net intranet application uses jQuery, and instead of referencing it on every page, I decided to include it in the master page within the script manager scriptReference tag. However, not all pages actually require jQuery. Will th ...
Our concept involves offering three choices: Email #1 pulled from the database Email #2 retrieved from the database Input a new email Should the user select option #3, a textbox will expand at the bottom of the dropdown menu for easy entry of a new emai ...
My current challenge involves adding letters to a HTMLElement one by one, but I'm noticing that whitespace disappears in the process. Here's an example: let s = "f o o b a r"; let e = document.createElement('span'); for (let i ...
Looking to create a Vue application that opens a CKEditor component in a separate window, I managed to do so following the method outlined in this helpful post. I have even set up a Codesandbox demonstration to showcase the functioning example. However, u ...
I'm struggling to create a responsive grid of images. I can't get the images to be both responsive with max-height and max-width, while also making sure the parent div takes up their full width. On the other hand, if I make the parent div the cor ...
Seeking advice on how to remove the margin from the first child of four progress bars arranged vertically in a right-to-left (rtl) form. I attempted using the "first-child" property without success. Any suggestions? .progress-bar-vertical:first-child { ...
In my hero div, I have a container div called right-col that contains two inner divs. These inner divs are sticky, creating the effect of cards sliding up when the container div is scrolled. This is the HTML structure: <!DOCTYPE html> <html lang= ...
Is there a way to transform this JavaScript variable and make it into a jQuery object as $(myFragment) alter the id attribute from "fragment" to "fragment1"? myFragment = "\ <div id='fragment'>\ <input type='hidde ...
<script src="https://cdn.tailwindcss.com"></script> <div class="h-screen grid grid-rows-[auto,1fr]"> <div class="bg-slate-300 h-24 flex items-center px-4"> <h1 class="text-3xl">Navbar</h1> </div> <div ...
<form action="<?php $self ?>" method="post"> <h2>LundaBlogg</h2> <div class="fname"><label for="name"><p>Namn:</p></label><input name="name" type="text" cols="20" onkeyup="En ...
After updating my devexpress version to 12.1, I noticed that all draggable elements are highlighting background elements in Chrome (20.0.1132.47 m). For instance, when dragging a splitter, the entire page blinks. When dragging an ASPxPivotGrid or ASPxGrid ...
I am just starting out as a beginner in web development. I decided to create a webpage to practice my HTML and CSS skills. However, when I set the width of all elements to 100%, I noticed that I am getting a horizontal scroll bar. I have tried troubleshoot ...
As a new React learner, I am diving into building my very first project - an expense tracker. Despite being close to finishing, I am struggling with incorporating ids and classNames in React. I've experimented with using refs, but unfortunately, it&ap ...
Within this code snippet, a for loop is utilized to iterate through an array called netnos[] and update the variable 'nets' for each item. Ajax is then invoked to call a PHP script that generates a listing, which is successfully outputted to the ...