How do I assign styling to a Javascript variable?


Tags: javascript,ruby-on-rails,css,ajax

Problem :

I have a simple, dynamic email form field. After the user submits their email, they receive the message 'Got it!'. I need the string "Got it!" to have the same styling as my <p> tag in my css.. but I don't know how to assign properties in javascript, and the other part of the code is in ruby and I don't know that either. It's probably a simple fix, but I can't find the answer!

Here is the javascript:

var finalText =
        'Got it!';


// Create a new div that will contain our thank you stuff
var thankyouDiv = document.createElement("div");
thankyouDiv.id = "home_thankyou";
thankyouDiv.innerHTML = finalText;

// Store reference to the formm
var form = document.getElementsByTagName("form")[0];

// Add the new thankyoudiv before the form
form.parentNode.insertBefore( thankyouDiv, form  );

// remove the form tag alltogether
form.parentNode.removeChild(form);

And here is the html/ruby code:

<%= form_for :home, :remote=>true, :update=>"emailsubmit", :url => {:controller=>"home", :action=>"create"} do |f| %>
<div id=emailsubmit><%= email_field("infosignup", "email", :placeholder=>"Enter your email") %></div>
<%= submit_tag("", :id=>"arrow2") %>

Any help?



Solution :

It isn't the JavaScript you need to style, but rather the <div> in which you write it.

Assign a class to your new div:

// Create a new div that will contain our thank you stuff
var thankyouDiv = document.createElement("div");
thankyouDiv.className = "someClass";
thankyouDiv.id = "home_thankyou";
thankyouDiv.innerHTML = finalText;

Then in your CSS, define the class with the same rules you've defined <p>:

p, .someClass {
  color: red;
}

    CSS Howto..

    how to create inline style with :before and :after

    How can I print a full gridview area via a custom print window?

    How to change the width of a CSS flex-box column?

    How to hide/show the content of a div with dynamic height?

    How to remove excess space added with \n

    How to override css img properties?

    How do I change image on hover of that the img is in - in jQuery?

    How to style the entire first row of a table in css

    CSS how do you stretch to fit and maintain the aspect ratio?

    How to remove “pictureframe” in Internet Explorer?

    (CSS) How to position the Div near to the bottom right corner of the browser Relatively to the Browser Size? [closed]

    Bootstrap: user agent css styles misbehaving how to solve this

    Foundation 6: how to handle images that has an vertical overflow within one row?

    How do I make these HTML blocks of info stay the same size?

    How to make list items of one UL with fixed height be displayed as columns?

    How to position background image horizontally left and vertically center?

    CSS - how to trim text output?

    how to align bootstrap nav menu with another div?

    CSS - How to add dot between navigation title

    How to remove flexbox default padding/margin/pagemargin?

    How to make hover dynamic in CSS?

    How to add space using css?

    Showing the child category when Clicking the parent category

    How to keep DIV from overlapping?

    CSS: How to create vertical and horizontal grids on the same element?

    How to read all numeric values from within a file in php?

    How to get started creating CSS for given (dynamically generated) HTML?

    How can we create custom style for Jquery-ui dialog window in PHP?

    How to select label for=“email” in CSS?

    how do i change the css property for only one row with a custom class with out removing the styles from the other rows?