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

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>

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>

you should clear all the tags
<p> and </p>

Related

Change Button Text after click back

Dear StackOverflow Community,
I have this Code to copy the URL to the Clipboard. The problem is, after clicked it stays on "kopiert". I want it to change back. I know that this question is asked 100x times and there is code on the Internet. My problem is, that I dont know much of programming and tried the codes on the web. Couldnt implement it. I really need help. Am really thankful for any.
Thanks in advance.
Code:
<div class="background">
<center>
<button class="clipboard">Link kopieren</button>
</center>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var $temp = $("<input>");
var $url = $(location).attr('href');
$('.clipboard').on('click', function() {
$("body").append($temp);
$temp.val($url).select();
document.execCommand("copy");
$temp.remove();
$("button").text("kopiert!");
})
</script>
You could use setTimeout() here to run a function that is delayed by a set amount of time. For example, we could update your JavaScript to be:
var $temp = $("<input>");
var $url = $(location).attr('href');
$('.clipboard').on('click', function() {
const originalText = $("button").text();
$("body").append($temp);
$temp.val($url).select();
document.execCommand("copy");
$temp.remove();
$("button").text("kopiert!");
// Run something in 2.5 seconds to revert back to the button's text
setTimeout(function() {
$("button").text(originalText);
}, 2500); // 2.5 seconds
})

Displaying and Hiding an Element using Cordova

I am very new to coding and am trying to create an app for a study. I am having trouble displaying an element on the correct page of my app using cordova and Xcode. Basically, I want to display a clickable phone number at the end of my app and I am having trouble getting the element to show only on that page (and not on every page of the app). I have figured out how to hide the element, but now I can't get it to appear in the right place. Here is my html code:
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<!-- HTML Template -->
<body onload="app.initialize()">
<div class="app">
<div id="window">
<div id="question">
</div>
<div id="popup" style="display:none">
Please call any of the below:
Phone System: 800-555-5555
</div>
</body>
</html>
I tried to include the following in my .js file but it did not work:
var $prehashval = "";
function loop()
{
if (location.hash.slice(1)!=$prehashval)
hashChanged();
$prehashval = location.hash.slice(1);
setTimeout("loop()", 100);
}
function hashChanged()
{
var $output;
switch (location.hash.slice(1))
{
case "question":
document.getElementById('question').style.display = "";
document.getElementById('popup').style.display = "none";
break;
case "popup":
document.getElementById('question').style.display = "none";
document.getElementById('popup').style.display = "";
break;
default:
$output = location.hash.slice(1);
}
}
loop();
I also tried adding the following:
$("#popup").hide()
$("#popup").display()
With no luck. Would appreciate any advice! Thank you.
With the help of some friends, I have fixed this problem! I added the following code to the .js file:
if (question.variableName === 'popup') {
$('#popup').show();
Hope this helps someone in the future!

Hide div content permanently

I want when the user click on submit button the content disappear (random text 3) until the user logs off. The JS works fine but, if I refresh the page, the content appears. Can anyone help me achieve this or can anyone convert my code to PHP so that I can use a session variable to achieve this?
<style type="text/css">
div.something{
/*random code;/*
}
</style>
<script type="text/javascript">
function hideSomething(){
document.getElementsByClassName("something")[2].style.display = "none";
}
</script>
<div class="something">random text 1</div>
<div class="something">random text 2</div>
<div class="something">random text 3</div><br />
<input type="submit" value="Disappear" onclick="hideSomething()" />
well the professional way is to record it on cookie or store in database with user information like IP or you can use rough way to just forward it to another page where that div not appear thou some dont allow cookies to store let me know which one you like and i will fill my answer with it sample
Use a cookie and store the status of the div there.
You can easily read and write a cookie using javascript.
A nice tutorial can be found here: http://www.w3schools.com/js/js_cookies.asp.
For example, in the hideSomething() function do the following:
document.cookie="display_div=true";
Then, when the page is loaded, call a javascript function that shows or hide the div based on the value of the cookie:
if(cookie_value == "true")
//Hide your div
else
//Show your div.
end
So first we create a form with a hidden text box, once user click on button Close Attendance the value of hidden textbox is submited and a session variable is created:
if(isset($_POST['hidden'])){
$_SESSION['closed'] = TRUE;
}
Then we check is session is set, if yes display attendance close, if not display content.
<?php if(isset($_SESSION['closed'])){
echo "attendance closed.";
}
else {
echo "<form name='test' action='attendance.php' method='post'>
<input type='hidden' name='hidden'/>
<button> Close Attendance </button>
</form>";
}
?>
try the following code, it should give you a very clear glimpse on how to do it.
<!DOCTYPE html>
<html>
<head>
<title>ZUUS: Ironman</title>
</head>
<script type="text/javascript">
function hideSomething()
{
document.cookie="hide_div=true";
myFunction();
}
function myFunction()
{
var cookie_value = getCookie("hide_div");
alert(cookie_value);
if(cookie_value == "true")
document.getElementById("test_div").style.display = "none";
}
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
</script>
<body onload="myFunction();">
<div id="test_div" style="background-color: blue;" onclick="hideSomething();">
this is a test
</div>
</body>
</html>

Javascript not rendering - Blank head

There's something wrong with my script, it doesn't render the JS correctly. I tried to pinpoint the problem but cannot find any typo. If i load the page, the tag is blank, making all css & other JS disabled. But suprisingly the data is loader correctly. If i remove the script, everything went to normal.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<script>
// Create a connection to the file.
var Connect = new XMLHttpRequest();
// Define which file to open and
// send the request.
Connect.open("GET", "Customers.xml", false);
Connect.setRequestHeader("Content-Type", "text/xml");
Connect.send(null);
// Place the response in an XML document.
var TheDocument = Connect.responseXML;
// Place the root node in an element.
var Customers = TheDocument.childNodes[0];
// Retrieve each customer in turn.
$("#middle").ready( function () {
document.write("<ul class='product'>");
for (var i = 0; i < Customers.children.length; i++)
{
var dul = "wawa"+[i];
//document.getElementById(dul).addEventListener('click', storeData, false);
var Customer = Customers.children[i];
// Access each of the data values.
var Pic = Customer.getElementsByTagName("pic");
var Name = Customer.getElementsByTagName("name");
var Age = Customer.getElementsByTagName("tipe");
var sex = Customer.getElementsByTagName("country");
var checked = window.localStorage.getItem("selected"+i);
// Write the data to the page.
document.write("<li><img href='./pic/");
document.write(Pic[0].textContent.toString());
document.write(".jpg'><a href='display.html?id="+i+"'>");
document.write(Name[0].textContent.toString());
document.write("</a><div class='age'>");
document.write(Age[0].textContent.toString());
document.write("</div><div class='sex'>");
document.write(sex[0].textContent.toString());
document.write("</div><div class='cex'>");
document.write("<input name='checkbox' type='checkbox' id='wawa_"+i+"'");
if (!checked) {
document.write(" onClick='cbChanged(this, "+i+")'");
} else {
document.write("checked onClick='cbChanged(this, "+i+")'");
}
document.write("></div></li>");
}
document.write("</ul>");
});
function cbChanged(checkboxElem, x) {
if (checkboxElem.checked) {
window.localStorage.setItem("selected"+x, x);
alert("That box was checked.");
} else {
window.localStorage.removeItem("selected"+x);
alert("That box was unchecked.");
}
}
</script>
</head>
<body>
<div class="container">
<div class="content" id="middle">
</div>
<div class="content" id="footer">
</div>
</div>
</body>
</html>
Ok here's the full source.
You don't close the HTML img tag right
Change
document.write("<li><img href='./pic/");
document.write(Pic[0].textContent.toString());
document.write("'.jpg><a href='display.html?id="+i+"'>");
// ^ this quote
To
document.write("<li><img href='./pic/");
document.write(Pic[0].textContent.toString());
document.write(".jpg'><a href='display.html?id="+i+"'>");
// ^ should be here
If you open the developer console you can usually see where errors like this take place. It will also output and javascript errors that you come across so it will make that part a whole lot easier. Do you have any errors in your console?
The dev consoles are:
Chrome: It is built it.
Firefox: Firebug
Safari: It's built it
EDIT:
Don't do var functionName = function() {..} unless you know about how hoisting works. This is contributing to you problem so change
cbChanged = function(checkboxElem, x) {
if (checkboxElem.checked) {
window.localStorage.setItem("selected"+x, x);
alert("That box was checked.");
} else {
window.localStorage.removeItem("selected"+x);
alert("That box was unchecked.");
}
}
To
function cbChanged(checkboxElem, x) {
if (checkboxElem.checked) {
window.localStorage.setItem("selected"+x, x);
alert("That box was checked.");
} else {
window.localStorage.removeItem("selected"+x);
alert("That box was unchecked.");
}
}
Without the above changes the function cbChanged is not hoisted. So if you call it before it is reached you will get an error.
There are several other things that stand out to me on this. You might want to spend some more time on your javascript fundamentals. Read up on why document.write is a bad thing. Try removing parts of the script to narrow down what is causing the problem. It would have made this easier to fix if you had made a fiddle.

Javascript Syntax Error - I'm a complete noob and can't see it

I'm returning a syntax error on line 9 (screenshot of IDE: http://dl.dropbox.com/u/2578642/Error.png).
I'm complete noob and can't see the error, anyway, here's the code:
<input type = "image" id = "myImage" src = "One.jpg" height ="130" width="173" border="0" Alt="Submit Form" onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://MYCONTENTLOCKER.com/guid?:1234567890'); showMessage(); setTimeout(changeImage, 30000)">
<br>
<span id = "message" style="display:none">You have completed this part!</span>
<script type = "text/javascript">
var count = 0;
function showMessage () {
if (count > 0) { // line 9
document.getElementById("message").style.display="block";
}
count ++;
}
function changeImage() {
document.getElementById("myImage").src = "Two.jpg"
}
</script>
Thanks for any help!
The code you posted is syntactically fine. I highly recommend you look into the script that you're "dynamically" loading through your inline onclick event handler.
Your JavaScript code looks fine, and the only thing I see that could be causing an issue is the space before and after the = in the HTML attributes.
<script type = "text/javascript">
Should be:
<script type="text/javascript">
So, your code should look like this (I also suggest indenting your code. Makes it easier to read):
<input type="image" id="myImage" src="One.jpg" height="130" width="173" border="0" Alt="Submit Form" onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://MYCONTENTLOCKER.com/guid?:1234567890'); showMessage(); setTimeout(changeImage, 30000)">
<br>
<span id="message" style="display:none">You have completed this part!</span>
<script type="text/javascript">
var count = 0;
function showMessage () {
if (count > 0) {
document.getElementById("message").style.display="block";
}
count++;
}
function changeImage() {
document.getElementById("myImage").src = "Two.jpg"
}
</script>
I'm not sure if that's the problem, but that's all I could think of.
Just realized that was your whole code. Would you please declare a valid HTML file? The highlighted this should've been a dead giveaway.
Well, it seems to work fine for me.
That said, the only thing I can possibly imagine being wrong is the > on that line is somehow getting escaped as an HTML entity before the page is served. Have you checked that the output of "view source" is indeed the same exact code you wrote?
Technically script elements and other elements with non-CDATA content containing "special" characters should have the content enclosed in a CDATA section. If your HTML code gets run through an XML parser at some point, it will choke on characters like <,>, and &.
With the CDATA section in the script, and the markup written as proper XHTML, the code would look something like this:
<html><head></head><body>
<input type="image" id="myImage" src="One.jpg" height="130" width="173" border="0" Alt="Submit Form" onclick="imageClick()" />
<br />
<span id="message" style="display:none">You have completed this part!</span>
<script type="text/javascript">
/* <![CDATA[ */
var count = 0;
function showMessage () {
if (count++ > 0) {
document.getElementById("message").style.display="block";
}
}
function changeImage() {
document.getElementById("myImage").src = "Two.jpg"
}
function imageClick() {
var fileref = document.createElement('script');
fileref.setAttribute('type','text/javascript');
fileref.setAttribute('src', 'http://MYCONTENTLOCKER.com/guid?:1234567890');
showMessage();
setTimeout(changeImage, 30000);
}
/* ]]> */
</script>
</body></html>
Update: OK, I just realized that you're getting the error in your IDE, not necessarily in the browser. I don't know if the IDE is complaining about the unescaped triangle bracket or not, but i suspect it might be. I don't know if it's smart enough to acknowledge the CDATA section though. I'm curious if this will appease it. What IDE is that, anyway?

Categories

Resources