0

I am trying to edit a few elements of a form, but the elements are"blocking" each others!

<script type="text/javascript">
document.getElementsByClassName("hbspt-form")[0].style.background = "#fffbd5";
document.getElementsByClassName("hbspt-form")[0].style.border= "solid";

document.getElementsByClassName("hbspt-form")[0].style.boxShadow = "10px 20px 30px ";
document.getElementsByClassName("hbspt-form")[0].style.borderColor = "#f7761f";


setTimeout(function(){}, 10);
document.getElementsByClassName("hs_input")[0].style.width="300 px";
document.getElementsByClassName("hs_input")[0].style.background = "#455560";
document.getElementsByClassName("hs_firstname field hs-form-field")[0].style.color = "#fff";
document.getElementsByClassName("hs_firstname field hs-form-field")[0].style.borderColor= "#ffd188";

</script>

Could anyone please tell me how I can solve this issue?(I was trying to use variables to prevent this but it didn't work..)

thanks in advance!

KLMM
  • 93
  • 1
  • 13
  • What does "blocking each other" mean? – jfriend00 Mar 14 '15 at 05:14
  • @jfriend00 all the statement s after the line: "document.getElementsByClassName("hbspt-form")[0].style.borderColor = "#f7761f";" are not being executed – KLMM Mar 14 '15 at 17:49
  • Did you check for script errors to see if that is why you aren't seeing the results of those lines? I hope you know that your `setTimeout()` function call is doing absolutely nothing. It does not delay the following lines of code at all. – jfriend00 Mar 14 '15 at 17:52
  • yeah, i checked for errors in the script its all good, but the changes are not being shown in the form and there are no errors showing up in the console – KLMM Mar 14 '15 at 18:56
  • Show us the actual HTML and, even better demonstrate the problem in a jsFiddle. – jfriend00 Mar 14 '15 at 18:58
  • @jfriend00 this is the js fiddle please take a look:http://jsfiddle.net/cy5mooob/ – KLMM Mar 14 '15 at 21:13
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/72998/discussion-between-l887-and-jfriend00). – KLMM Mar 14 '15 at 21:19
  • There are so many unresolved relative paths on your scripts that the jsFiddle isn't directly runnable. The code in your `setTimeout()` fails because there's no element with a class of `hs_input` in your document, thus `document.getElementsByClassName("hs_input")` returns `null` and then the code fails when you try to get the `[0]` element of that `null`. – jfriend00 Mar 15 '15 at 03:20
  • @jfriend00 how do i solve it? – KLMM Mar 15 '15 at 04:33
  • Stop using code that is requesting an element that isn't there. Either fix the code to refer to an element that is actually there, fix the HTML so that element is found in the HTML or remove the wrong code. I'm honestly not sure what you want help with. – jfriend00 Mar 15 '15 at 04:41

2 Answers2

0

Javascript setTimeout takes as its parameters a function that it will run after the set time has passed and the amount of time to wait. As stated here:

It will not block execution of the block it is in, rather, it will call its input function after a certain interval.

In your case, what you should be seeing is all of those instructions executing immediately, which means you never see the results of the first lines you have there.

To address this, move the changes you'd like to see, inside your setTimeout:

setTimeout(function(){
  document.getElementsByClassName("hs_input")[0].style.width="300 px";
  document.getElementsByClassName("hs_input")[0].style.background = "#455560";
  document.getElementsByClassName("hs_firstname field hs-form-field")[0].style.color = "#fff";
  document.getElementsByClassName("hs_firstname field hs-form-field")[0].style.borderColor= "#ffd188";
  document.getElementsByClassName("hs_firstname field hs-form-field")[0].style.borderColor= "#ffd188";
}, 10);
Community
  • 1
  • 1
erewok
  • 7,555
  • 3
  • 33
  • 45
0

See the last two lines of your script. It seems you are trying to apply the same exact same code twice. I wonder if that's on purpose? And also, you seem to have placed the curly brackets in the wrong places.

document.getElementsByClassName("hs_firstname field hs-form-field")[0].style.borderColor= "#ffd188";

document.getElementsByClassName("hs_firstname field hs-form-field")[0].style.borderColor= "#ffd188";
miselking
  • 3,043
  • 4
  • 28
  • 39
Vivek Tiwari
  • 25
  • 7
  • well thats a mistake but that is not the cause of this issue, all the statement s after the line: "document.getElementsByClassName("hbspt-form")[0].style.borderColor = "#f7761f";" are not being executed – KLMM Mar 14 '15 at 17:49