how do i make a hash run a function - javascript

i am new to javascript and i do not know how to do a hash but here is my code the code trigers curency to change on my website currently only byt clicking on a flag but i would like to use a hash like http://hostchick.co.uk/#ca to change the princing to canadian
<script type="text/javascript" language="javascript">
window.location.hash = "#ca"
{
function changeText(1);
function changeText(2)
}
</script>
<script language="javascript">
function changeText(idElement){
if(idElement==1){
document.getElementById('element'+1).innerHTML ='£1.99';
} else if(idElement==2){
document.getElementById('element'+2).innerHTML ='£2.99';
}
if(idElement==3){
document.getElementById('element'+1).innerHTML ='$3.15';
} else if(idElement==4){
document.getElementById('element'+2).innerHTML ='$4.73';
}
if(idElement==33){
document.getElementById('element'+1).innerHTML ='$3.16';
} else if(idElement==44){
document.getElementById('element'+2).innerHTML ='$4.75';
}
if(idElement==333){
document.getElementById('element'+1).innerHTML ='¥10.01';
} else if(idElement==444){
document.getElementById('element'+2).innerHTML ='¥29.94';
}
}
</script>
<li><a href="#" onClick="javascript:changeText(1);javascript:changeText(2)">
test
</a>
</li>

window.location.hash = "#ca"
{
function changeText(1);
function changeText(2)
}
is syntactically invalid JavaScript, so the assignment to location.hash never happens.
I'm not quote clear on what you're trying to do, but maybe
function changeText(1);
function changeText(2)
should be
changeText(1);
changeText(2);
Changing the hash does not cause the page to reload, so the server isn't involved. You can always use JavaScript to examine the hash and behave differently based on it.

Related

How to insert javascript function into html div

I have a .cshtml file with the following in the head tag:
<script type="text/javascript">
getPlatform = function() {
if (Platform.Android) {
return "androidlink";
}
else if (Platform.IOS) {
return "IOSLink";
}
else {
return "other";
}
}
</script>
The reason I've inserted this is because this logic was already taken care of in another javascript file which I've imported in. Essentially what I need to do is change the link of a button depending on which platform the user is using. I've tried the following but this does not work (and even if it did, looks messy and I'm sure incorrect) but I can't seem to find a solution. Can anyone help please?
</div>
getPlatform()</script> id="mobilelink" class="btn"
</div>
One cannot write this:
getPlatform()</script> id="mobilelink" class="btn"
This is how it can be done:
</div>
<a href="" id="mobilelink" class="btn" </a>
</div>
<!-- Later in the page (ideally just before the end </body> tag) -->
<script>
document.getElementById('mobileLink).href = getPlatform()
function getPlatform () {
if (Platform.Android) {
return "androidlink";
}
else if (Platform.IOS) {
return "IOSLink";
}
else {
return "other";
}
}
</script>
why don't you check it when the page is loaded and change the href of the a tag accordingly? Like:
<a id = "mobileLink" href="">some text</a>
And
var getPlatform = function() {
if (Platform.Android) {
return "androidlink";
}
else if (Platform.IOS) {
return "IOSLink";
}
else {
return "other";
}
}
document.getElemenyById("mobileLink").href = getPlatform
//Or innerHTML, I don't really understand what you want to do
<script type="text/javascript">
function getPlatform() {
if (Platform.Android) {
document.getElementById('mobileLink').innerhtml = "androidlink";
}
else if (Platform.IOS) {
document.getElementById('mobileLink').innerhtml = "IOSLink";
}
else {
document.getElementById('mobileLink').innerhtml = "other";
}
}
</script>
the html,
</div id="mobilelink" class="btn" onload = "getPlatform()">
</div>
Right now I can only assume the results, that you need. This is one of the ways, inwhich you can return the result from a JS function to the html division. If the onload doesnt work, I'd suggest using an onclick = "getPlatform()" function since that is more aggressive in its notation.
this is incorrect approach.
I would recommend you put all scripts before closer </body> html-tag.
Then in your script you can write such code like:
const platform = getPlatform();
const mobilelinkEl = document.querySelector('#mobilelink');
mobilelinkEl.setAttribute("src", platform);
Make sure, that your script tag with src attribute set placed after script tag with getPlatform, and also make sure you have access to getPlatform function.
If you'll have additional question, write comments, I'll try to help you.

JavaScript Redirect not working with ?fbclid=

the community!
I'm going through some issues. the redirection feature doesn't work well when I try to post the link on the Facebook platform. in general, the redirection only works outside facebook community. when I click on the shared link on Facebook automatically set this parameter at the end of URL ?fbclid=
example : https://myblog.blogspot.com/go/fb?fbclid=
but when I put the link directly on the browser works properly
here is my code
<script language='javascript'>
//<![CDATA[
var key = window.location.href.split("go/")[1].replace("/","")
var urls={
'fb':'https://www.facebook.com',
}
if(key){
if(urls[key]){
window.location.href=urls[key]
}else{
document.write("'"+key+"' not found 😞");
}
}
//]]>
</script>
Use window.location.pathname instead of window.location.href.
<script>
//<![CDATA[
var key = window.location.pathname.split("go/")[1].replace("/","")
var urls={
'fb':'https://www.facebook.com',
}
if(key){
if(urls[key]){
window.location.href=urls[key]
} else {
document.write("'"+key+"' not found 😞");
}
}
//]]>
</script>

JavaScript code to conditionally change link URL

I know this has been covered extensively as separate issues; I've tried copying verified answers, but I'm having trouble homologating Javascript conditional statements and a link URL change.
Essentially, what I need to do is detect mobile users and change a conference call URL to a tel link. I've been using if (screen.width <=699) { as the condition and it works on redirects. Here's what I've tried:
<script type="text/javascript">
<!--
var call=document.getElementByID('phone');
if (screen.width <= 699) {
call.write('<a href="tel:!PHONENUMBER!">');
else
call.write('<a href="!URL!" target="blank">);
}
//--!>
</script>
</head><body>
...
...
I've also tried these with corresponding else statements to no avail:
no var and document.getElementByID('phone').write
onclick = function() { window.location.href ='tel:!PHONENUMBER!};.
call.src.replace('tel:!PHONENUMBER!');
call.setAttribute("href",'tel:!PHONENUMBER!');
I apologize if this is a super basic issue - I'm still learning Javascript. Thank you in advance.
Will
You need to either wait for the page to finish loading before you execute your JavaScript or move your script block to the bottom of the HTML.
If you want to wait for the page to finish loading, then wrap your code in the following:
window.onload = function () {
// your code goes here
}
Figured it out with help from #sepbot.
<body onload="mobileURL()">
<div id="phone"></div>
<script type="text/javascript">
function mobileURL() {
var a = document.createElement("a");
a.innerHTML="!LINKTEXT!";
var myPhone = document.getElementById('phone');
if (screen.width <= 699) {
a.setAttribute('href', '!TELEPHONE!');
myPhone.appendChild(a);
} else {
a.setAttribute('href', '!URL!');
myPhone.appendChild(a);
}
}
</script>

Can we have code after location.reload(true)?

I have a function that does a reload from server with:
location.reload(true)
Currently, any code I have after this line is not executed.
I'm curious if there is a way to be able to have more code run after the reload?
The best way to do this would be to write a function that is called if there are certain "GET" variables set and to check them on each run such as mypage.html?reload=true
Or even hash locations: mypage.html#reload
And you can compare like so:
$(document).ready(function () {
if (window.location.hash == '#reload') {
onReload();
}
});
function onReload () {
console.log('test');
}
function reload () {
window.location.hash = 'reload';
window.location.reload();
}
Just call the reload(); function.
Output (in console): test
And then you can just redirect people away from the hash #reload if you don't want your function to run if the page is refreshed again: window.location.hash = '';
why you need execute something after reload the page?
If you need to do something after reload, so you can pass some parameter to the page and check this to execute something additional. You can redirect to the same page and pass a complete url
var url = window.location.href;
url += '&param=1'
window.location.href = url;
So, when your page reload, you can check a parameter by GET and do whatever you want. I hope this trick help you!
________________METHOD 1: WITH PHP_________________
1) reloading with a parameter
2) getting that parameter with PHP
For example:
window.location.href += '&reloading=1';
//it's equivalent to:
//window.location.href = window.location.href + '&reloading=1';
And then:
<?php
if (isset($_GET['reloading'])) {
echo '<script>pageReloaded();</script>';
}
?>
Since PHP will be executed first, that little script (the function call) will be writen and then executed in javascript, so pageReloaded() function will be called.
A full example would be:
<?php if (isset($_GET['reloading'])) echo '<script>pageReloaded();</script>'; ?>
<script>
function reloadNow(){
alert("I'm about to reload");
window.location.href += '&reloading=1';
}
function pageReloaded(){
alert("I've been reloaded!");
}
</script>
<button onclick="reloadNow()">Press to reload</button>
________________METHOD 2: NO PHP, ONLY JAVASCRIPT_________________
Using SessionStorage
1) Set SessionStorage.
2) Reload
3) Get that SessionStorage
For example:
<script>
function reloadNow(){
alert("I'm about to reload");
sessionStorage.setItem('reloading',"true");
window.location.reload(true);
}
//when loading:
if (sessionStorage.getItem('reloading') === "true") {
sessionStorage.clear(); //so it doesn't trigger next time
alert("I've been reloaded!");
}
</script>
<button onclick="reloadNow()">Press to reload</button>

How to run javascript in href?

I'm trying to get a string of script to run in an href so the link will redirect users depending on an if/else statement. My code:
<div id="editredirect">
<script>
if("[#authfield:Authentications_2_Region]" == "[#field:Location_2_Region_ID]"){
window.location.href = "member-details-edit?CID=[#field:Member_Caspio_ID]&Location_ID=[#field:Member_Location_ID]";
}
else if ("[#authfield:Authentications_2_Region]") == "[#field:Location_2_B_Region_ID]"{
window.location.href = "member-details-edit?CID=[#field:Member_Caspio_ID]&Location_ID=[#field:Member_Location_ID]";
}
else {
window.location.href = "member-details?CID=[#field:Member_Caspio_ID]&Location_ID=[#field:Member_Location_ID]";
}
</script>
</div>
<style type="text/css">a.ex1:hover {color: #f18c21; text-decoration: underline;}
</style>
<a class="ex1" href="javascript:.initialize(document.getElementById("editredirect"));">Details</a>
I've tred do also do a function like this:
<script>
function editredirect {
if("[#authfield:Authentications_2_Region]" == "[#field:Location_2_Region_ID]"){
window.location.href = "member-details-edit?CID=[#field:Member_Caspio_ID]&Location_ID=[#field:Member_Location_ID]";
}
else if ("[#authfield:Authentications_2_Region]") == "[#field:Location_2_B_Region_ID]"{
window.location.href = "member-details-edit?CID=[#field:Member_Caspio_ID]&Location_ID=[#field:Member_Location_ID]";
}
else {
window.location.href = "member-details?CID=[#field:Member_Caspio_ID]&Location_ID=[#field:Member_Location_ID]";
}
}
</script>
<style type="text/css">a.ex1:hover {color: #f18c21; text-decoration: underline;}
</style>
<a class="ex1" href="javascript:editredirect">Details</a>
Neither one will work. The first string returns a syntax error, the second tells me that "editredirect" is undefined.
Thank you!
EDIT
Praveen Kumar's suggestions were the best. The developer for the database I am using was able to get the application to do it without having to insert any script. However, they did say that the event listener would have also worked once I had my parameters correct.
You can use onclick and add the whole JavaScript logic:
Click me?
The best way is to use event listener like this:
document.getElementsByTagName("a")[0].addEventListener("click", function () {
a = prompt('What\'s your name?');
if (a !== null)
alert('Welcome, ' + a);
else
alert('Bye Bye!');
return false;
}, false);
Click me?
This is better than using href. If you still want to run it in href, you need to create a function and run:
function aha() {
a = prompt('What\'s your name?');
if (a !== null)
alert('Welcome, ' + a);
else
alert('Bye Bye!');
return false;
}
Click me?
Note: In your code, you have used wrong notation. That's a syntax error. JavaScript functions have to be declared in a specific way. Follow that!

Categories

Resources