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!
Related
The JavaScript below works perfect when running it from within a <script> JS </script> tag. However, as soon as I run the code from a separate file I get an Uncaught TypeError: cannot set property of innerHTML of null. I have no idea what is going on here. Any help is much appreciated.
// Admin Nightmode Switch
var nmStylesheet = document.getElementById("nightmodeon");
if (localStorage.getItem("lastActiveNmSheet")) {
nmStylesheet.setAttribute('href', localStorage.getItem('lastActiveNmSheet'));
}
if (nmStylesheet.getAttribute('href') === "view/stylesheet/elmigo_nighton.css") {
document.getElementById("nightmode").innerHTML = "<span><i class=\"fa fa-moon-o\"></i></span>";
}
function nightmode() {
var nmButton = document.getElementById("nightmode");
var nmIconDay = "<span><i class=\"fa fa-sun-o\"></i></span>";
var nmIconNight = "<span><i class=\"fa fa-moon-o\"></i></span>";
if (nmButton.innerHTML === nmIconDay) {
nmButton.innerHTML = nmIconNight;
nmStylesheet.setAttribute('href', 'view/stylesheet/elmigo_nighton.css');
localStorage.setItem('lastActiveNmSheet', 'view/stylesheet/elmigo_nighton.css');
} else {
nmButton.innerHTML = nmIconDay;
nmStylesheet.setAttribute('href', '#');
localStorage.setItem('lastActiveNmSheet', '#');
}
}
What you have done is reference the external JS script before the element it tries to interact with.
When you reference a .js script externally with a <script> tag you can envision that external script being written within wherever that script tag is.
JS runs sequentially, so if your external JS is reverenced prior to the elements you change being declared/ closed, it will not be able to identify them.
To resolve this, most developers put an js scripts just prior to the closing </body> tag
<html>
<body>
<script>
document.getElementById("test").innerHTML="This element has been changed"
</script>
<div id="test"> This Id wont be chaged as it is looked for before it is declared! </div>
</body>
</html>
This is where the script, whether external via file or written in the code, is declared before the element it is trying to interact with
<html>
<body>
<div id="test"> This Id wont be changed as it is looked for before it is declared! </div>
</body>
<script>
document.getElementById("test").innerHTML="This element has been changed"
</script>
</html>
This is where the script is declared after the element it is interacting with
yow JS code runs before them html items are rendered, it is why all them nulls and stuff
window.addEventListener('DOMContentLoaded', (event) => {
// Admin Nightmode Switch
var nmStylesheet = document.getElementById("nightmodeon");
if (localStorage.getItem("lastActiveNmSheet")) {
nmStylesheet.setAttribute('href', localStorage.getItem('lastActiveNmSheet'));
}
if (nmStylesheet.getAttribute('href') === "view/stylesheet/elmigo_nighton.css") {
document.getElementById("nightmode").innerHTML = "<span><i class=\"fa fa-moon-o\"></i></span>";
}
function nightmode() {
var nmButton = document.getElementById("nightmode");
var nmIconDay = "<span><i class=\"fa fa-sun-o\"></i></span>";
var nmIconNight = "<span><i class=\"fa fa-moon-o\"></i></span>";
if (nmButton.innerHTML === nmIconDay) {
nmButton.innerHTML = nmIconNight;
nmStylesheet.setAttribute('href', 'view/stylesheet/elmigo_nighton.css');
localStorage.setItem('lastActiveNmSheet', 'view/stylesheet/elmigo_nighton.css');
} else {
nmButton.innerHTML = nmIconDay;
nmStylesheet.setAttribute('href', '#');
localStorage.setItem('lastActiveNmSheet', '#');
}
}
});
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>
I want to make a footer credit protection using javascript. I've seen one using jquery. But it didn't worked properly. I want to apply that code to my blogger templates. I've written the following javascript code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function lol(){
var footer = document.getElementById("mycreditlink");
if (footer.hasAttribute("href")) {
footer.setAttribute("href", "http://grplusbd.net");
}
if (footer == null){
window.location.href = "http://grplusbd.net";
}
}
window.onload = function(){lol();};
</script>
</head>
<body>
<div>
Powered By <a href='http://google.com' id='#mycreditlink'>My Site</a>
</div>
</body>
</html>
But it isn't working properly either. I want it to make the footer url change automatically and if the id="mycreditlink" is removed by the client, it will redirect automatically to my website home. I need help immediately. If the code works, I will enode it and add to my templates.
<div>
Powered By <a href='http://google.com' id='mycreditlink'>My Site</a>
</div>
There is a error here: id='#mycreditlink' need to be like: id='mycreditlink'
And
function lol(){
var footer = document.getElementById("mycreditlink");
if (footer.hasAttribute("href")) {
footer.setAttribute("href", "http://grplusbd.net");
}
if (footer == null){
window.location.href = "http://grplusbd.net";
}
}
window.onload=function(){lol();};
or
window.onload=lol();
You can make use of jQuery as I have done below...
<script type="text/javascript">
function lol(){
var footer = jQuery("#mycreditlink");
if (footer) {
jQuery(footer).attr("href", "http://grplusbd.net");
}
else {
window.location = "http://grplusbd.net";
}
}
window.onload = function(){lol();};
</script>
I have a website in which I have placed specific buttons inside of articles and outside in the head/body/footer. What I plan to do is when a user clicks on the button the JavaScript code should find out if the button is located inside of an article or outside of it and send the information to my parent website using PHP's $_GET function. This is the code on the 'child' website..
<!-- Button code -->
<p id="test"></p>
<a id ="webs" href= "" onclick="jams(this);document.getElementById('test').frameBorder=0"; target="test"><button>Click me!</button> </a>
The JavaScript functions it calls.
<p id="demo"></p>
<script>
function jams(z) {
var origZ=z;
var found= false;
var sString;
while ( z.nodeName != "HTML" && !found){
var elements = z.getElementsByTagName('a');
for(var i=0; i<elements.length; i++) {
var input = elements[i] ;
sString = input.getAttribute("href");
found = sString.search(window.location.hostname) != -1;
}
z=z.parentElement;
if ( z.nodeName != "HTML" && z.nodeName != "ARTICLE"){
z=z.parentElement;
var spString = (window.location.hostname);
var link = "http://www.parentwebsite.com/one.php?id="+spString;
origZ.href = link;
}
}
var link = "http://www.parentwebsite.com/two.php?id="+sString;
origZ.href = link;
}
</script>
I have two pages on the parent website, page one.php receives the websites name (www.child.com) if the button is located outside of the article. If the button is located within an article page two.php receives the articles URL.Using PHP's $_GET Variable.
$success = $_GET["id"];
So when the user clicks the button on the webpage the button will call the jams script and it recognizes where the button is situated on the webpage and sends to either one.php the website-name OR two.php the articles URL.
The script works just fine when the button is situated within an article,
the href =
http://www.parentwebsite.com/two.php?id=http://child-articles-url.com/
BUT it fails when it is outside of an article, the href
http://www.parentwebsite.com/two.php?id=http://www.parentwebsite.com/one.php?id=http://www.child.com/
What it needs to give is just:
http://www.parentwebsite.com/one.php?id=http://www.child.com/
P.S I have used chrome's debugger while working with this.
Thanks in advance! :)
I tried to solve your problem
index.php
<!DOCTYPE html>
<html>
<head>
<title>Using JavaScript in “button” self recognition on webpage</title>
</head>
<body>
<!-- Your HTML CODE -->
<div class="aricle">
<h2> Article Starts </h2>
This is inside Article
<h2> Article Ends </h2>
</div>
<br />
This is inside Article
<!-- Your JS CODE -->
<script type="text/javascript">
function link(button) {
if (button == 1) {
//alert("button inside article");
window.location.href='http://localhost/stackTest/one.php';
} else if (button == 2) {
//alert("button outside article");
window.location.href='http://localhost/stackTest/two.php';
}
}
</script>
</body>
</html>
one.php
<h2>This is One</h2>
two.php
<h1>This is Two</h2>
Hope this helps you to identify the buttons.
and you can use the anchor (a) tags for displaying as a button instead using <button> tag inside <a>..</a> tag.
If you are using Bootstrap simply use "Button" Class for <a>.
I have an ERB document:
<!DOCTYPE html>
<html>
<head>
<script>
scrollDown = function() {
document.body.scrollTop = document.body.scrollHeight;
}
</script>
</head>
<body onload='scrollDown()'>
<div id='2'>
</div>
<div id='target'>
<%=#chat%> <!-- #chat is a variable from my ruby file -->
</div>
<form action="/addChat?n=<%=#name%>" method='post'>
<input name='nchat' type='text' onload='this.focus' autofill='no' style='width:100%;height:10em;vertical-align:top'>
<input type='submit'>
</form>
<a href='/home'>Go home!</a>
</body>
</html>
And I would like to have it so that every half of a second it will do two things. First it needs to move the contents of the <div id="target"> to <div id="2"> then reload the contents of <div id="target"> getting the variable #chat from another route (post \content do ... end).
I am using sinatra and heroku. PLEASE DO NOT ANSWER USING JQUERY. I DO NOT KNOW HOW TO USE JQUERY AND I WOULD LIKE TO UNDERSTAND HOW THE ANSWER WORKS.
I will be happy to add any resources you need to answer this question, and I will try to do so as promptly as possible.
Clarification
Here is my code which has been slightly modified since asking this question (I hope this code clarifies my question). When I enter the loop to move things from <div id="target"> to <div id="2"> into the console in browser (google chrome latest version) it runs fine and moves everything correctly. Here is the loop:
while (document.getElementById('target').childNodes.length > 0) {
document.getElementById("2").appendChild(document.getElementById('target').childNodes[0]);
}
Now my only remaining issue is reloading the content of <div id="target"> from the route in my app file post '/chatContent' do ... return #chat end where #chat is a dynamically changing variable every 0.5 seconds and before reloading each time running the above loop. Here is my current attempt at the reloading with the loop (also most of this is copy paste from various sources, so I don't really understand it):
var refreshDelay = 5000000;
function createRequestObject() {
var ro;
if(navigator.appName == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function sndReq() {
while (document.getElementById('target').childNodes.length > 0) {
document.getElementById("2").appendChild(document.getElementById('target').childNodes[0]);
}
http.open('post', '/chatContent?n=<%=#name%>');
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
while (document.getElementById('target').childNodes.length > 0) {
document.getElementById("2").appendChild(document.getElementById('target').childNodes[0]);
}
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('target').innerHTML = response;
setTimeout(sndReq, refreshDelay);
}
}
setTimeout(sndReq, refreshDelay);
</script>
<script>
scrollDown = function() {
document.body.scrollTop = document.body.scrollHeight;
}
function movethings() {
while (document.getElementById('target').childNodes.length > 0) {
document.getElementById("2").appendChild(document.getElementById('target').childNodes[0]);
}
}
Just to clarify, what I am looking for is a replacement for the above code, including 1st) Running the loop to move the contents of <div id="target"> to <div id="2"> then 2nd) reloading <div id='target'>. The order is important.
I hope that this clarification has narrowed the scope of my question. If it has not, please leave a comment about why it is too broad because I do not understand how it is.
Edit 2
In summary, each answer must, in order, do the following:
Move content of <div id="target"> to <div id="2">
Reload <div id="target"> so that it contains the return of my Sinatra route, post "/chatContent"