Dialog box Script not working - javascript

Guys Below is my Script but It is not working can anyone tell why???
Wanna check? Please use This Script at:- http://calcus.host56.com/make_your_own_link.htm
<html><head>
<title>Hello</title>
<style>
a {color:black;font-size:23;}
textarea {color:white;font-size:1;border:none;}
</style>
<script>
function select8()
{
document.getElementById("demo").select();
}
</script>
</head>
<body>
<script>
function myFunction()
{
var x;
var name=prompt("Please enter your Facebook username","");
if (name!=null)
{
x="https://www.facebook.com/dialog/apprequests?api_key=148768088503846&app_id=148768088503846&data=%7B%7B"+"category"+"%3A"+"virtue"+"%7D%7D&display=popup&filters"+"&frictionless=false&locale=en_US&message=Here+is+a+Virtue+for+you+Mihir+Gupta%21%21+By+Chirag+Jain&next=http%3A%2F%2Fvolcanoisland.brokenbulbstudios.com%2F%252Ff312818684%26relation%3Dopener%26transport%3Dpostmessage%26frame%3Df18dc1ab6%26result%3D%2522xxRESULTTOKENxx%2522"+"&sdk=joey&title=Send+your+friends+a+daily+gift&to="+name;document.getElementById("demo").innerHTML=x;
}
}
</script>
<button onclick="myFunction()" accesskey="v">Click Here to Make Your Own Virtue Link </button>
<br>
<textarea id="demo">Your Url Here</textarea>
<button onclick="select8()" accesskey="x">Entered username?? <br>Now Click here and press Ctrl + c to copy the link </button>

Try this jsfiddle. You must define myFunction() in the head section.
<html>
<head>
<title>Hello</title>
<style>
a {color:black;font-size:23;}
textarea {color:white;font-size:1;border:none;}
</style>
<script>
function myFunction()
{
var x;
var name=prompt("Please enter your Facebook username","");
if (name!=null)
{
x="https://www.facebook.com/dialog/apprequests?api_key=148768088503846&app_id=148768088503846&data=%7B%7B"+"category"+"%3A"+"virtue"+"%7D%7D&display=popup&filters"+"&frictionless=false&locale=en_US&message=Here+is+a+Virtue+for+you+Mihir+Gupta%21%21+By+Chirag+Jain&next=http%3A%2F%2Fvolcanoisland.brokenbulbstudios.com%2F%252Ff312818684%26relation%3Dopener%26transport%3Dpostmessage%26frame%3Df18dc1ab6%26result%3D%2522xxRESULTTOKENxx%2522"+"&sdk=joey&title=Send+your+friends+a+daily+gift&to="+name;document.getElementById("demo").innerHTML=x;
}
}
function select8()
{
document.getElementById("demo").select();
}
</script>
</head>
<body>
<button onclick="myFunction()" accesskey="v">Click Here to Make Your Own Virtue Link </button>
<br>
<textarea id="demo">Your Url Here</textarea>
<button onclick="select8()" accesskey="x"> Entered username?? <br />Now Click here and press Ctrl + c to copy the link </button>
</body>
</html>

Related

How to script a button click in a separate JS file rather than HTML Script Header tag

So I need some help, I am new to JS and I need to to find a solution to the problem I am having. I am trying to create a button when it clicks changes a piece of text. When I create a JS function in the script tag header and reference the function in the button onclick it works, but it doesn't work in a separate JS file. The HTML code is below. Hopefully, someone can help me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="changetext.js"></script>
<script>
function Button() {
document.getElementById("demo").innerHTML = "hello";
}
</script>
<script>
function Button2() {
document.getElementById("demo").innerHTML = "hi";
}
</script>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
this is an example...
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
first you need remove your script.. we include script only if you dont use a external js.
on your external js(changetext.js)
function Button(){
document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
document.getElementById("demo").innerHTML = "Hellow from button2";
}
result:
if you dont use a external js the code is this:
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button();"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2();"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
<script>
function Button(){
document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
document.getElementById("demo").innerHTML = "Hellow from button2";
}
</script>
we write the code js in the tag script good luck !!
Write your function in changetext.js and make sure that is in same place as your HTML file.
change onclick to onClick
and remove your script tags in the head

ZeroClipboard issue

I am trying to copy the link of current page using ZeroClipboard and I don't know what to do further.
This is my code until now. How can I copy the link?
function copyLink() {
document.getElementById("copy").value += window.location.href;
var link = document.getElementById("copy").value;
var client = new ZeroClipboard();
client.setText(link);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.Core.min.js"></script>
<html>
<head>
<title>Copy</title>
</head>
<body>
<div>
<button id="copyBtn" onclick="copyLink()">Copy link</button>
<textarea id="copy" style="display: none;"></textarea>
</div>
</body>
</html>
Thanks !

Cannot change html content of div tag

I must not understand how to change the content of my <div> tag.
Here is my html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="simple.js"></script>
<title>simple</title>
</head>
<body>
<div id="results" name="results"><!-- Results are displayed here -->
<form method="post" name="start">
<p>Enter url: <input type="text" name="myurl" size="100" /></p>
<button onclick="myFunction()">Click me</button>
</form>
</div>
</body>
</html>
Here is my .js file:
function myFunction() {
alert('hey');
document.getElementById("results").innerHTML = "Hello World";
}
When I click the button the alert pops up but the html does not change to "Hello World". It just stays the same :(
What am I doing wrong here.
Update: Thanks everyone! Here is what I have working now:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple</title>
</head>
<body>
<div id="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter url: <input type="text" id="myurl" size="100" /></p>
</form>
<button id='clickme'>Click me</button>
<button id='noclickme'>No Click me</button>
</div>
<script src="simple.js"></script>
</body>
</html>
My .js file:
function say_something(s) {
document.getElementById("results").innerHTML = s;
}
document.getElementById("clickme").addEventListener("click", function(){
var url = document.getElementById('myurl').value;
if (url==null || url=="") { alert("Please supply a url"); return false; }
say_something( "Hello World [" + url + "]");
});
document.getElementById("noclickme").addEventListener("click", function(){
var url = document.getElementById('myurl').value;
if (url==null || url=="") { alert("Please supply a url"); return false; }
say_something( "Goodbye [" + url + "]");
});
A button's default behaviour is to submit the form. In this case, the action being blank, it will try to submit to the current URL. You need to prevent that from happening. Also it's bad form to put Javascript inside your HTML like that - use addEventListener instead:
document.querySelector("#results button").addEventListener("click", function(e) {
e.preventDefault();
alert('hey');
document.getElementById("results").innerHTML = "Hello World";
});
Note you'll need to include your script before the </body> rather than in <head> when using this method, or use the DOMContentLoaded event listener.
Example jsFiddle
The reason is the form label.
when you click the button, the form will take an action,but you did not have a certified action, so the chrome will take the defautl action,ie reload the html.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple</title>
<script src="simple.js"></script>
</head>
<body>
<div id="results" name="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter url: <input type="text" name="myurl" size="100" /></p>
<button onclick="myFunction()">Click me</button>
</form>
</div>
</body>
</html>

How do you use data in a text field?

I want the data in the text field to transfer to a popup, but when I trigger the popup, it is always blank, no matter what is in the box.
<html>
<head>
<title>Popup</title>
</head>
<body>
<button onclick="popup()">Click for popup</button>
<input type="text" name=popupMess><br>
</body>
<script>
function popup() {
window.confirm(name.popupMess);
}
</script>
</html>
<html>
<head>
<title>Popup</title>
</head>
<body>
<button onclick="popup()">Click for popup</button>
<input id="popupMess" type="text"><br>
</body>
<script>
function popup() {
alert(document.getElementById('popupMess').value);
}
</script>
</html>
You forgot the " in name="popupMess".
function popup () {
var text = document.querySelector("input[name='popupMess']").value;
window.confirm(text);
}
Hi here is my jsfiddle that demonstrates the functionality
http://jsfiddle.net/7pjqfcvd/2/
you have to
mark the input element with an Id
<input type="text" id="popupMess"/>
use the id in document.getElementById call to obtain the input element
var elem = document.getElementById("popupMess");
retrieve the value from the element and pass it into the messagebox
window.confirm(elem.value);
But still if you want to use name then try this...
<html>
<head>
<title>Popup</title>
</head>
<body>
<button onclick="popup()">Click for popup</button>
<input type="text" name=popupMess><br>
<script>
function popup() {
var d = document.getElementsByName("popupMess");
window.confirm(d[0].value);
}
</script>
</body>
</html>

Newbie: hanging browser on function call

I just started learning JavaScript and am wondering why this simple snippet hangs when I click on the "Call function" button. What am I missing?
<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.write("hello");
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
</body>
</html>
You need to write inside an element or give an element a value, or you should use document write like that :
<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.getElementById("lblMessage").innerText = "hello";
document.getElementById("txtMessage").value = "hello";
//document.write("hello");
}
</script>
</head>
<body>
<form>
<script type="text/javascript">
document.write("This is written while page processed by browser !<br />");
</script>
<input type="text" id="txtMessage" /><br />
<span id="lblMessage"></span><br />
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
</body>
</html>
If you simply want to see your button doing something then try:
alert("Hello");
instead of the document.write.
Where do you expect the function to output its "hello"? Right into the button's source code? That makes no sense. The browser is confused and hangs.
Document.write doesn't magically insert something at the end of your document. It writes its stuff out right there where it is called.
Not too sure what you mean by "hang"... Try this out... The alerts can be removed, but will inform you of where it is at in execution...
<html>
<head>
<script type="text/javascript">
function myFunction() {
//for debugging
alert('Made it into function');
document.getElementById('MyOutputDiv').innerHTML = 'Word To Your Mom...';
//for debugging
alert('function complete');
}
</script>
</head>
<body>
<input type='button' onclick='myFunction();' value='Call Function'>
<br>
<div id='MyOutputDiv'></div>
</body>
</html>
document.write, but where? You have to specify this.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello</title>
</head>
<body>
<pre><script type="text/javascript">
function myfunction() {
d = document.getElementById('hello');
d.style.display = "block";
d = document.getElementById('callme');
d.style.display = "none";
}
</script>
</pre>
<div id="hello" style="display:none">
Hello
</div>
<div id="callme">
<input type="button"
onclick="myfunction()"
value="Call function">
</input>
</div>
</body>
</html>
I can't explain the "hang" but please take a look at this page for a primer on document.write: http://javascript.about.com/library/blwrite.htm I would also like to second that you probably want to write to a specific element in the page rather than just overwriting the entire page.

Categories

Resources