Issue with vertical alignment of subscripts and superscripts

I am working with two buttons that manipulate the verticalAlign property. One button is supposed to set it to sub and the other is supposed to set it to sub. However, both buttons end up setting it to sub. Here is the code for both actions:

Superscript

document.getElementById("hidden").innerHTML=document.getElementById("text").value;
document.getElementById("hidden").style.verticalAlign="super";
document.getElementById("hidden").style.fontSize="75%";

Subscript

document.getElementById("hidden").innerHTML=document.getElementById("text").value;
document.getElementById("hidden").style.verticalAlign="sub";
document.getElementById("hidden").style.fontSize="75%";
javascriptcss

Answer №1

Have you checked the css properties using the Developer Tools in your browser? Are the styles displayed there?

If not, I suggest trying out this approach:

document.getElementById("hidden").css("vertical-align","super");
document.getElementById("hidden").css("font-size","75%");

and 

document.getElementById("hidden").css("vertical-align","sub");
document.getElementById("hidden").css("font-size","75%");

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

Performing a modulo operation within a v-for loop

I'm showcasing divs in a loop and I need to assign classes based on the loop index. My goal is to have index 0 and 1 with the class col-6, then indexes 2,3,4 with the class col-4, followed by index 5 and 6 having the class col-6, and so forth. This w ...

javascriptvue.jsvuejs2v-for

Exploring various layers of nested data

I am currently developing a comprehensive global data storage system for my application (specifically an Angular JS app - although this question pertains to JavaScript in general). I have established a 'service' that is responsible for setting t ...

javascriptangularjssquare-bracket

Merge a text input and TinyMCE editor into a new field using JavaScript. Limit TinyMCE editor to only allow Numbered Lists

When the 'Archive to History' button is clicked, I want the Today's Date text field and Last Update WYSIWYG field to append their contents to the Complete Project History WYSIWYG field, without replacing existing text. The date should appear ...

javascriptjquerytinymce

Maximizing Redux DevTools integration with Redux Toolkit and Next.js for TypeScript projects

The initial state is visible in the DevTools, but any actions taken after the code has rendered do not show up. In pages/_app.tsx, I have implemented the following: import getStore from '../store/store' export default function MyApp({ Component ...

javascriptreact-reduxnext.jsredux-toolkit

"Navigate with Ease: Introducing the Twitter Bootstrap Scroll

Having trouble with the twitter bootstrap scroll spy feature as the navigation doesn't update until midway through scrolling and skips item 4 to reach the last item. Check out this example: http://jsfiddle.net/eoboite/kjvAa/38/ What am I doing wrong? ...

javascriptjqueryhtmlcsstwitter-bootstrap

Add the attribute's value to an array

$(document).ready(function() { function randomColor() { return 'rgb(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ')' ...

javascriptjqueryhtmlarrays

When the Angular script is executed, the variable is not defined

One of my custom directives receives an object named 'vm' in its scope, which contains a property/value pair (ccirCategoryIncidentI : 3) that I need to access. When I try to log this value with console.log(scope.vm.ccirCategoryIncidentI), it init ...

javascriptjqueryangularjsd3.jsnvd3.js

Error: Attempted to access the 'state' property of an undefined object

I am working with the following function: extractCountries: function() { var newLocales = []; _.forEach(this.props.countries, function(locale) { var monthTemp = Utils.thisMonthTemp(parseFloat(locale["name"]["temperature"])); if(p ...

javascriptreactjs

"Position the label on the left and input on the right for

Having trouble with label and input alignment - I've attempted: <div class="form-group"> <label class="control-label" for="" style="float: left;font-size: 20px;padding-right: 10px;">ID : </label> <input style= ...

htmlcss

Why are the items I have inserted inside my <div> tag not appearing on the screen?

What could be simpler than this: {this.state.dash ? <div className='dashWrapper slide'> HELLO </div> : null} I've tried everything, but nothing seems to show up inside the div. ...

cssreactjs

Tips for updating a value in a nested directive in AngularJS

My directive includes a menu toggle button and various nested directives with their own menus. The outer directive has an isolated scope, while the inner directive has no specified scope. I am trying to figure out how to show/hide the menu in the inner d ...

javascriptangularjs

Utilizing ng-style with a ForEach loop on an Object

How can I dynamically add a new style property to objects in an array in Angular, and then use that property inside ng-style? CommentService.GetComments(12535372).then(function () { $scope.comments = CommentService.data(); angular.forEac ...

javascriptangularjsangularjs-ng-repeat

Is there a way to work around the CORS policy in order to fetch data from URLs?

I have been developing a tool that can analyze URLs from an uploaded CSV file, search the text content of each URL, and calculate the total word count as well as the occurrences of "saas" or "software". The goal is to generate a new CSV file with the origi ...

javascripthtmlcsscsvcors

The text content is not in alignment with the server-rendered HTML for translation purposes with i18n

I have successfully implemented i18n in my Next.js project. The folder structure for my locales is as follows: public/locales/en/translation.json and public/locales/fr/translation.json The error I am encountering is: Uncaught Error: Text content does n ...

javascriptreactjsnext.jsserver-side-renderingi18next

JavaScript allows you to set an expiration date for a specific item

I am facing an issue with a form that contains inputs. On clicking the submit button, I want to capture the current time and add 10 hours to it before updating the table cell named expdate. Although I have a function in place for this purpose, it seems to ...

javascriptphpjquerymysql

Utilizing Node.js: How to access another function within the same controller?

I am facing an issue with accessing one function from another in my code. How can I achieve this? class firstController { firstFunction(req, res) { var stamp = request.query("Select 'ALB'+left(newid(),5)+right(newid(),5)+ left(n ...

javascriptnode.jsexpress

What types of HTML are compatible with SweetAlert?

I am exploring the HTML elements that can be used with the SweetAlert alert function (). It seems that headings like h1, h2, etc. and strong tags are allowed, but when I tried to add inline styles like style="color:blue;", the alert stopped working. The v ...

javascriptjqueryhtmlcsssweetalert

Is it possible to display or hide a spinner within a span using Javascript and AJAX?

When submitting a contact form, I want to display and hide a spinner on the submit button. The spinner should be visible while the form is being submitted and hidden once the submission is complete. Below is the code for my submit button with the spinner: ...

javascriptjquerycssajaxtwitter-bootstrap

Implementing a confirmation dialog for POST requests in Flask

My first experience with Flask involves adding a confirmation dialog to a form, but only under specific conditions. Unfortunately, I'm unable to achieve this on the client side. While I was successful in implementing it for GET requests, POST requests ...

javascriptpythonhtmlflask

The JSONP file can be successfully retrieved through an AJAX request in the console, however, the data does not display when attempting

Currently attempting to send an ajax request utilizing the following code snippet: $.ajax({ url: "http://mywebsite.com/blog/json", dataType: "jsonp", jsonpCallback: "jsonpCallback" }); function jsonpCallback(data) { console.log(data); } E ...

javascriptjqueryajaxjsonp