Question

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?

Answer 1

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;
}