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 Customize jCountdown timer which is using css sprite resources to become auto Responsive?

    How use Append Jquery

    How do i move an image from left to right and right to left in javascript for infinite time?

    How to achieve parallax behind horizontal bars while scrolling

    How can I stop the submit button from stacking under the text field on a bootstrap form?

    Bootstrap: How to make repeated divs go around a fixed div

    How can I select second element and after that in CSS?

    How to make a 2x2 grid of Div's in CSS?

    how to apply css to a specific element of a table?

    how to combine multiple css class selectors into one?

    Greasemonkey: How to do something when style=“display: none;” changes?

    Does HTML5 DOCTYPE affect how CSS3 effects are rendered?

    How to add php to wordpress form

    How to make CSS/HTML prototyping faster for engineers without strong CSS skills?

    bootstrap navbar how to give it a max width

    Ionic Side Menu Not Showing Content

    How to get text within div to be relative to the div's width and height, CSS, HTML

    How to remove class using CSS

    How to use Bootstrap 3 gradient for background in CSS? [closed]

    How combine multiple media destinations (screen, print) with width restriction?

    How to vary the tone of an image dynamically using only css?

    How to show span class inside the textbox?

    How do I gather a class' css attributes given nothing but the className?

    CSS How to attach input box to bottom of divider window

    How to create a table using multiple span in one div using CSS

    how to set the css left property of a class on the basis of an ID of a tag

    CSS: how to make children fit parent's width

    How can i select the div from CSS?

    How can I implement “CSS versioning” (to solve cache issues) using JSF 2 h:outputStylesheet?

    How to make a sliding dashboard similar to medium.com? [closed]