Question on id="imgClickAndChange" and onclick="copy_password().."

Question

I want to have a picture when clicked, change from image 1 > image 2 > image 3 > back to image 1. And at the same time when they click it, it copies a hidden caption belonging to the picture that says "COPY THIS TEXT". I used the code, which I will place below of this post. It seems to work when I run it here. But when I place it on my website, it doesnt work.

So what I did is I went to inspect elemet and to console. It throws out a Uncaught SyntaxError: Unexpected token '<' on the places where I start the code with a script command. Im not interested in using a .js input, just want a html edit.

Im not sure what Im doing wrong. Could someone look into the code for me? Im not every experienced with Javascript.

It seems to run okay when I test the code on jfiddle or W3schools Try it editor.

Currently, I just need the javascript to work on one portion of just one of my post entry and Not the whole website. It is very specific to that section. Im currently pasting the code in wordpress under: Create Post >> Text Tab

as an html input (i.e. just copied and paste the code below).

The kind people here have managed to help me get the image to toggle. However, it is not able to copy the text. Can anyone help? It states ReferenceError: copypass is not defined

Here is the code below

<html>
<body>


<p>


        <img src='http://www.clipartbest.com/cliparts/RiA/66K/RiA66KbMT.png' id="imgClickAndChange" onclick="copy_password() ; changeImage()"/>
        
</p>


<script language="javascript">
    function changeImage() {

  if (document.getElementById("imgClickAndChange").src == "http://www.clipartbest.com/cliparts/RiA/66K/RiA66KbMT.png") {
      document.getElementById("imgClickAndChange").src = "http://www.wpclipart.com/education/animal_numbers/animal_number_2.png";
   }
    else if (document.getElementById("imgClickAndChange").src == "http://www.wpclipart.com/education/animal_numbers/animal_number_2.png") {
        document.getElementById("imgClickAndChange").src = "https://secureservercdn.net/166.62.112.199/smt.db9.myftpupload.com/wp-content/uploads/2012/06/Number-3-bright.png";
    }
    else if (document.getElementById("imgClickAndChange").src == "https://secureservercdn.net/166.62.112.199/smt.db9.myftpupload.com/wp-content/uploads/2012/06/Number-3-bright.png") {
       document.getElementById("imgClickAndChange").src = "http://www.clipartbest.com/cliparts/RiA/66K/RiA66KbMT.png";
        }
    }
    
</script>



<center>


<p hidden> <span id="pwd_spn" class="password-span">COPY THIS TEXT</span></p>


<script>
document.getElementById("cp_btn").addEventListener("click", copy_password);

function copy_password() {
   var copyText = document.getElementById("pwd_spn");
  var textArea = document.createElement("textarea");
 textArea.value = copyText.textContent;
   document.body.appendChild(textArea);
    textArea.select();
    document.execCommand("Copy");
   textArea.remove();
}



</script>

</body>
</html>

Zack Heisenberg · Accepted Answer · 2020-05-16T12:29:03.997

i didn't fully understand you , but i tweaked your code , it working fine for me i hope it works for you too by the way make sure the scripts are above if you are going to change so you don't get that the fuctions aren't declared

<html>

<head>
    <script language="javascript">
        function changeImage() {  
            if (document.getElementById("imgClickAndChange").src == "http://www.clipartbest.com/cliparts/RiA/66K/RiA66KbMT.png") {
                document.getElementById("imgClickAndChange").src = "http://www.wpclipart.com/education/animal_numbers/animal_number_2.png";
             }
              else if (document.getElementById("imgClickAndChange").src == "http://www.wpclipart.com/education/animal_numbers/animal_number_2.png") {
                        document.getElementById("imgClickAndChange").src = "https://secureservercdn.net/166.62.112.199/smt.db9.myftpupload.com/wp-content/uploads/2012/06/Number-3-bright.png";
              }
              else if (document.getElementById("imgClickAndChange").src == "https://secureservercdn.net/166.62.112.199/smt.db9.myftpupload.com/wp-content/uploads/2012/06/Number-3-bright.png") {
                    document.getElementById("imgClickAndChange").src = "http://www.clipartbest.com/cliparts/RiA/66K/RiA66KbMT.png";
            }
        }


       function copypass() {
       let copyText = document.getElementById("pwd_spn");
       let pass = copyText.textContent;


       let textArea = document.createElement("textarea");
 textArea.value = pass;
   document.body.appendChild(textArea);
    textArea.select();
    document.execCommand("Copy");
   textArea.remove();
    }
    </script>
</head>
<body>


<p>


        <img src='http://www.clipartbest.com/cliparts/RiA/66K/RiA66KbMT.png' id="imgClickAndChange" onclick="changeImage() ; copypass()"/>

</p>

<p hidden> <span id="pwd_spn" class="password-span">COPY THIS TEXT</span></p>



</body>
</html>

Omg it works. However, the copy text function to not work now ): — user13552501, May 16 '20 at 10:46
the copy text i used use navigator.clipboard https://developer.mozilla.org/fr/docs/Web/API/Clipboard it's not supported in old browsers so i will edit the code and add both a method for old browsers and method for new ones — Zack Heisenberg, May 16 '20 at 12:17
i have edited the code and removed the clipboard api and added the old textarea method try again , if it worked please mark this as solved :) — Zack Heisenberg, May 16 '20 at 12:29

score 0 · Answer 2 · answered May 16 '20 at 09:26

0

you should clear all the tags

<p> and </p>

answered May 16 '20 at 09:26

Mehmet ÖZCAN

129
4

Omg it works. Okay. I deleted the tags but now the copy text does not work. Any help? – user13552501 May 16 '20 at 10:24
You cannot copy the span value. Solution: [link](https://stackoverflow.com/a/49236251/1578652) – Mehmet ÖZCAN May 16 '20 at 10:33
Hello, what do you mean? Actually i used the exact code in your solution. So why doesnt the copy works? Sorry tryiing to understand. – user13552501 May 16 '20 at 11:25

Question on id="imgClickAndChange" and onclick="copy_password().."

2 Answers2