Script not working in Firefox but works in Chrome

JavaScript
1

Hi

I made a script but it doesn’t work in Firefox or on mobile:

<button id="toggle" type="submit" title="<?php echo $this->__('Subscribe') ?>" class="button"><span><span><?php echo $this->__('Subscribe') ?></span></span></button>
    <script>
    //<![CDATA[
        var newsletterSubscriberFormDetail = new VarienForm('newsletter-validate-detail');

            function myFunction() {
                var change = document.getElementById("toggle");
                if (change.innerHTML == "<span><span>Subscribe</span></span>")
                {
                    change.innerHTML = "<span><span>Human? Click Again</span></span>";
                }
                else {
                if (change.innerHTML == "<span><span>Human? Click Again</span></span>")
                {
                    $('#toggle').submit();
                }
                }
           }
    //]]>
    </script>

How can I get it working in Firefox?

Thank you

2

Hello, your function looks syntactically correct, although it makes more sense to use “else if” instead of an “if” inside the “else” block.

What do you expect that code to do and how does it fail? In your browser’s console (F12 → Console) you should see warnings and/or error messages, so check that out while testing.

3

  1. Create variable that saves button status and check/change this valriable. innerHTML checking is very uncomfortable.

  2. Better to edit span.innerHTML for text without tags in.

1 Like
5

Hi there Freejoy,

it would be better to use “nodeValue” or “textContent”,
rather than “innerHTML”, for your project. :winky:

Further reading :-

nodeValue v textContent v innerHTML

Here is a working example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

</head>
<body>

 <form action="#">
  <input type="hidden" name="test" value="O.K.">
  <button id="toggle" type="submit">Subscribe</button>
 </form>

<script>
(function( d ) {
   'use strict';
   var change = d.getElementById( 'toggle' ); 
       change.addEventListener( 'click', 
          function(e) {
             if ( change.firstChild.nodeValue === 'Subscribe' ) {
                  change.firstChild.nodeValue = 'Human? Click Again';
                  e.preventDefault();
                } 
             }, false );
}( document ));
</script> 

</body>
</html>

coothead

1 Like
6

Thanks coothead

That works great! I just need to style it.

Maybe it will stop some spam. I’m hoping the robots can’t figure out that they have to click again! : )

7

Do you mean that instead of:

if (something)
{
	statement;
}
else 
{
	if (somethingelse)
	{
		statement;
	}
}

To use:

if (something)
{
	statement;
}
else 
	if (somethingelse)
	{
		statement;
	}

If that is what you mean then it is just a matter of style. Some developers always use blocks and some do not. If the code will always be worked by one person then that person can do whatever they prefer. If code is to be worked by multiple developers then the standard should be followed, whatever the standard is for the organization or project or whatever. The computer does not care.

8

I could suggest an alternative but I assume you will keep the suggestion you have already. I however would do as suggested by @igor_g.

Note that I would also do something more after doing the submit; that is, when the text is “Human? Click Again” I might reset things to the beginning or I might disable the text.

9

I’m not very good at javascript. I’m going to see if it works. And if not try plan B : )

Thanks

10

This is off-topic from your question but for spam I was receiving much spam from a contact page for a website I have since removed temporarily. What I discovered however is that all the spam was sent with X-Sender-Info: perfora.net in the header. There were very many From email addresses but evidently they were all sent from one server, or something like that. If you want more about that then ask a new question so it can have a topic of its own and you can get help from the most people possible.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.