return domain name in javascript - javascript

I'm trying to use javascript to echo/return the domain name into a displayed document.
I found this code that works by using a button click
But I need it to run automatically when the page is loaded.
The idea is so I have an about page on a site with multiple domains.
So if someone loads foo.com the page says "About FOO.COM" and if someone loads BAR.COM it likewise says "About BAR.COM" on the fly.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to return the domain name of the server that loaded this document.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = document.getElementById("demo");
x.innerHTML=document.domain;
}
</script>
</body>
</html>

Just call the function immediately instead of putting it in an event handler.
myFunction();

with jquery:
<div id="yourbutton>your Button</div>
<script>
$(document).ready(function(){
$("#yourbutton").html(document.domain);
});
</script>
without jquery:
search for window.onload
...yay my first post on stackoverflow ;

Related

How can I fix the way javascript runs and consolidate the way the page loads in all types of tabs

I want to be able to get an alert with my ip address when I click the button but something strange is happening:
In a normal tab: The site loads and nothing happens when I click the button.
In a private tab: The alert comes and once you press ok the button loads and on pressing nothing happens. The javascript function ran even though I didn't use
How can I fix this?
Thanks in advance
<!DOCTYPE html>
<html>
<head>
<script type="application/javascript">
function getIP(json) {
alert(json.ip);
}
</script>
<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script>
</head>
<body>
<button onclick="getIP()">CLICK ME</button>
</body>
</html>
The function getIP is being called when the ipify.org script finishes loading. If you want to only display that ip when the button is clicked, store the ip value to some variable on window in the getIP callback.
<script type="application/javascript">
function getIP(json) {
window.ip = json.ip;
}
</script>
Now on you button you can do this to display the ip:
<button onclick="alert(window.ip)">CLICK ME</button>
or simply:
<button onclick="alert(ip)">CLICK ME</button>
Your button click event doesn't pass in the json parameter when it calls getIP().
Instead the onclick event needs to call another function that will make a request for https://api.ipify.org?format=jsonp&callback=getIP.

Flask JavaScript/HTML Scripts Not Working

I have a flask web application I am creating( also using Angular CLI), and I have a button. I am trying to use JavaScript to conduct an action on the button click but for whatever reason I can't get the JavaScript to work.
However when I copy the java Script into a completely different simple flask project (that I downloaded from online), it works fine?
Does anyone know if I have to do something in my flask project to get the javascript working?
I read somewhere it has to do with the way i run the flask app ? (0.0.0.0 vs localhost) but im not sure
Here's the code I am trying to use:
<!DOCTYPE html>
<html>
<body>
<h1>The onclick Event</h1>
<p>The onclick event is used to trigger a function when an element is clicked on.</p>
<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
You passed function result as an argument instead of function instead.
Use
onclick="myFunction"
But if you want do it in a professional way you should do this:
<!DOCTYPE html>
<html>
<body>
<h1>The onclick Event</h1>
<p>The onclick event is used to trigger a function when an element is clicked on.</p>
<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>
<button>Click me</button>
<p id="demo"></p>
<script>
document.querySelector('button').addEventListener('click', myFunction)
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
And using innerHTML to inserting data isn't the best option too. In javascript you can create DOM elementr programaticaly.
Try this, if none of the console.log's show up then its a issue with how it's compiled
document.addEventListener('DOMContentLoaded',()=>{
console.log('loaded)
let btn = document.querySelector('button')
btn.addEventListener('click', myFunction)
function myFunction(e) {
console.log(e);
document.getElementById("demo").innerHTML = "Hello World";
}
})
Try from a ‘static’ folder in the root directory. Literally call it static and then place a js file inside.
Then in the html try this

how can I run Javascript on one page, that the user had input on the previous page?

I need to have the Javascript written by the user on one page to be saved and used for the next page. By this, I mean, I need to grab the contents of a div, and somehow save that into a .JS file, which wil automatically run as the next page loads. Is there a way in which I could do this, Or is there another way in which this could be achieved?
Basically, something along the lines of what Codecademy has done, but not live?
If you are just working on a local project (nothing server side). you could store the value to localStorage.
// page 1
<!DOCTYPE html>
<html>
<body>
<div contentEditable="true" id="i1"></div><button id="b1">open next page</button>
</body>
<script>
var div = document.getElementById('i1'), text = "desired value";
div.innerText = text;
document.getElementById('b1').onclick = function(){
localStorage['div value'] = div.innerText; window.open('page2.html'); window.close('page1.html');
}
</script>
</html>
// page 2
<!DOCTYPE html>
<html>
<body>
<p id="p"></p>
<button id="b2">go back</button>
</body>
<script>
p.innerText = localStorage['div value']? localStorage['div value']: "There is no value in your div";
b2.onclick = function(){ window.open('page1.html'); window.close('page2.html'); }
</script>
</html>
If you are ready to change the architecture, I have a question as your answer. Have you tried single page JS applications through AngularJS, EmberJS, Backbone etc?
you don't need to save into a .JS file
you need to post the JS to the server, then render it to the next page
i'm the next page
<script>
// user's code
</script>

Remove body tag within iframe with jQuery

I'd like to remove an unnecessary header from an iframe contained within the prettyPhoto lightbox plugin that's part of WooCommerce (http://www.shapur.com/product-category/fp-journe/). When you click on the single product button at the bottom of that page, it should remove the body tag contained in the iframe. The iframe conforms to the same origin policy, so that's not it.
I've created a test page here on same domain, which works great: http://www.shapur.com/test.php.
Is there a conflict with the lightbox? I just don't understand. Grateful for any assistance.
Here's the code for the test page:
<!DOCTYPE html>
<html>
<body>
<iframe id="myframe" src="http://shapur.com/index.php"></iframe>
<p>Click the button to change the style of the body tag contained in the iframe.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("myframe");
var y = x.contentDocument;
y.body.style.display = "none";
}
</script>
</body>
</html>
Since it's coming from the same origin, why don't you use jQuery load() function:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function myFunction() {
$(".myDiv").load("/index.php",function(data){
$(data).find('body').css("display","none");
});
}
</script>
And have an empty :
<div class="myDiv"></div>
This way, it would be easier for you to play around with the code.

Popup when click button

I have a simple html with a button
I subscribed to mailchimp (newsletter and forms widget)
and I got from them a code for my site that works when
you load the page.
I want the page to execute the code (open the pop up)
only when I click the button. can you help me with it?
(I feel it's kind of a easy one but I'm get a bit scared
cause it's a script code - I don't know why...)
this is my page - in the head there's the script
<html>
<head>
<script type="text/javascript" src="//s3.amazonaws.com
/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-`config="usePlainJson: true, isDebug: false"></script>`
<script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us7.list-manage.com","uuid":"d5b6774fb8bf432d69df52d93","lid":"3ed431a3b6"}) })</script>
</head>
<body>
<button type="button">Click Me!</button>
</body>
</html>
also,
I upload it to a server - so this is the page online:
http://judamenahem.com/popuplp2/popup.html
You just have to add to the onClick of the button the code which is in the head who load the current popup.
function myFunction() {
require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us7.list-manage.com","uuid":"d5b6774fb8bf432d69df52d93","lid":"3ed431a3b6"}) });
}
and use :
<button type="button" onclick="myFunction()">Click Me!</button>
You can use standard popup boxes (those boxes that most sites use for: "Hey, you won X, do you really want to leave?") to ask the person a question via alert().
Here is some documentation on them. http://www.w3schools.com/js/js_popup.asp
You would simply need to attach a ClickEventHandler onto your button in your JS that triggers alert().
function myFunction() {
alert("I am an alert box!");
}
<button type="button" onclick="myFunction()">Click Me!</button>
So when you Click on Submit button then it open alert box
There is also prompt() function, which lets the user interact with the box

Categories

Resources