I have been looking at combining the following two ideas as I need to go to a relative URL based on the current URL
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_loc_hostname from which I have:
<script>
function myFunction() {
var x = location.hostname;
document.getElementById("demo").innerHTML= x;
}
</script>
And then:
var newUrl = "";
window.location = newUrl/x;
So that I can have a button on the page to take me from domain1.suffix
to domain2.suffix/domain2.suffix for a page concerning that domain
Can anyone help me piece this together?
Try this code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function GetHost()
{
var protocol = "http://";
var x = location.hostname;
window.open((protocol + x));
document.getElementById("demo").innerText = protocol + x;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="Test It" onclick="GetHost()" />
<p id="demo"></p>
</div>
</form>
</body>
</html>
Try this:
<html>
<head>
<script>
function openWin() {
var x = "http://" + location.hostname;
window.open(x);
}
</script>
</head>
<body>
<form>
<input type="button" value="Open Window" onclick="openWin()">
</form>
</body>
</html>
Related
When I run my code and press either the button 'encode' or the button 'decode' I get this error:
Uncaught ReferenceError: value1 is not defined
at HTMLButtonElement.onclick (HtmlPage2.html:34)
I have tried to move the script as an external file to the area above the </body> but I still get the same.
It seems that value1 is not recognized at the input as the 'name'. Shouldn't that get it defined?
Shortly:
I don't understand why value1 is undefined. Could someone please explain?
This is my code :
var newURL;
function setEncode(myURL) {
newURL = encodeURIComponent(myURL);
alert(newURL);
document.getElementById("info").innerHTML = newURL.toString();
}
function setDecode(myURL) {
decodeURL = decodeURIComponent(newURL);
alert(decodeURL);
document.getElementById("info").innerHTML = decodeURL.toString();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="text" name="value1" />
<button name="encode" onclick="setEncode(value1.value)"> encode </button>
<button name="decode" onclick="setDecode(value1.value)"> decode </button>
<div id="info"> Decode / encode </div>
</body>
</html>
Thank you all!
Use id instead of name attribute.
var newURL;
function setEncode(myURL) {
newURL = encodeURIComponent(myURL);
document.getElementById("info").innerHTML = newURL.toString();
}
function setDecode(myURL) {
decodeURL = decodeURIComponent(newURL);
document.getElementById("info").innerHTML = decodeURL.toString();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="text" id="value1" />
<button name="encode" onclick="setEncode(value1.value)"> encode </button>
<button name="decode" onclick="setDecode(value1.value)"> decode </button>
<div id="info"> Decode / encode </div>
</body>
</html>
Reason behind this:
If an html element assigned ID attribute, it can be used in javascript with that variable name. For example
myDiv.innerHTML = myDiv.innerHTML + "<p>See? What did I tell you?</p>";
<div id="myDiv">
This div ID is myDiv, can be called in JavaScript.
</div>
You can't assign the values directly to the function in your html. But you can can use selectors to get the value from input and attach an event listener to your button However if you you want to do all this on the html you do something like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
// encoding and decoding URIs
var newURL;
function setEncode(myURL) {
newURL = encodeURIComponent(myURL);
alert(newURL);
document.getElementById("info").innerHTML = newURL.toString();
}
function setDecode() {
decodeURL = decodeURIComponent(newURL);
alert(decodeURL);
document.getElementById("info").innerHTML = decodeURL.toString();
}
</script>
</head>
<body>
<input type="text" id="value1" />
<button name="encode" onclick="javascript:(function (){let v=document.getElementById('value1');setEncode(v.value)})()"> encode </button>
<button name="decode" onclick="javascript:(function (){let v=document.getElementById('value1');setEncode(v.value)})()"> decode </button>
<div id="info"> Decode / encode </div>
</body>
</html>
I'm writing some to get the user's input in a text area and then to pass it to google app scripts to my main google script to email it on. I also tried to pass them through the project properties with no luck.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p style="font-family:verdana;font-size:15px">Problem title</p>
<input type="text" id="sDes"> <br><br>
<p style="font-family:verdana;font-size:15px">Decription</p>
<textarea style="resize: none;" rows="8" cols="63" id="lDes"></textarea>
<button type="button" onclick="myFunction()">Send</button>
<p id="demo"></p>
</body>
<script>
function myFunction() {
var a = document.getElementById("sDes").value;
var b = document.getElementById("lDes").value;
}
</script>
</html>
Try this:
run the openDialog() function after filling in serverfunctionname and htmlfilename.
Your html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p style="font-family:verdana;font-size:15px">Problem title</p>
<input type="text" id="sDes"> <br><br>
<p style="font-family:verdana;font-size:15px">Decription</p>
<textarea style="resize: none;" rows="8" cols="63" id="lDes"></textarea>
<button type="button" onclick="myFunction()">Send</button>
<p id="demo"></p>
</body>
<script>
function myFunction() {
var a = document.getElementById("sDes").value;
var b = document.getElementById("lDes").value;
google.script.run.serverfunctionname(a,b);//modification
}
</script>
</html>
GS:
function serverfunctioname(x,y) {
SpreadsheetApp.getUi().alert('I received ' + x + ' and ' + y);
}
function openDialog() {
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('htmlfilename'), "My Dialog")
}
Here is my code snippet:
function myFunction() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
}
<!DOCTYPE html>
<html>
<body>
<textarea id="myTextarea"></textarea>
<button type="button" onclick="myFunction()">Transform into link</button>
<script src="links.js"></script>
</body>
</html>
Somehow, the created link is not opened when I click on it. Kind of stuck at this point.
You were doing it right, you just needed to use href instead of innerHTML.
function myFunction() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").href = x;
}
<!DOCTYPE html>
<html>
<body>
<textarea id="myTextarea"></textarea>
<button type="button" onclick="myFunction()">Transform into link</button>
My Link!
<script src="links.js"></script>
</body>
</html>
I'm creating a web page that has a text area in it and the user can enter code and have it displayed underneath. If I place my function in the HTML file it works just fine but when I move it to the JS file it doesn't work. Any help, even pointing me in the direction of my issue would be appreciated.
Here is my HTML code with the function commented out......
<!DOCTYPE html>
<html>
<head>
<title>DOM TREE 2</title>
<link rel="stylesheet" href="css/Content.css">
<script type="text/javascript" src="JS/js01.js"></script>
</head>
<body style="background-color:lightgray" id="bd">
<div id="third">
<h1> DOM TREE <img src="Images/tree_logo.jpg" alt="Calc" id = "pic">
</h1>
<form id="DOMForm">
<textarea id="myTextarea" rows="4" cols="50"></textarea>
<p><button type="button" onclick="AddFunction()">Add Content</button>
<button type="button" onclick="Change()">Change Style</button>
<button type="button" onclick="Clear()">Clear Content</button>
</p>
<p id="demo"></p>
<!--<script>
function AddFunction() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
}
</script> -->
</body>
</html>
Here is the JS file with the function.....
function AddFunction()
{
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
}
function changestyle()
{
}
function clear()
{
document.getElementById("DomForm").reset();
}
Because names are different, compare onclick="Change()" to function changestyle() and onclick="Clear()" to function clear().
I wrote these few lines of code and would like the text to change once the button is pressed but its not working. Could you please find out the problem?
var omari = "Omari Lamar";
function omari (){
el = document.getElementById('slice');
el.textContent = omari + "Is a computer Programmer!";
}
<html>
<head>
<title></title>
</head>
<body>
<h1>Title Example</h1>
<button onclick="omari();">Click me</button>
<div id="slice">
sample text
</div>
<script src="app.js"></script>
</body>
</html>
Change the code to:
var omariName ="Omari Lamar";
function omari (){
el = document.getElementById('slice');
el.textContent = omariName + "Is a computer Programmer!";
}
Here you go, Your function name and variable name were the same
var omary ="Omari Lamar";
var omari = function(){
var el = document.getElementById('slice');
el.innerHTML = omary + "Is a computer Programmer!";
};
<html>
<head>
<title>
</title>
<script src="app.js"></script>
</head>
<body>
<h1>Title Example</h1>
<button onclick="omari();">Click me</button>
<div id="slice">
sample text
</div>
<script src="app.js"></script>
</body>
</html>
this is the problem:
you have a variable named omari and a function name omari. so, when you try calling the function omari, javascript actually looks at the variable definition, and not the function. just give them different name.
try the code below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
</head>
<body>
<script>
var _omari ="Omari Lamar";
function omari(){
el = document.getElementById('slice');
el.innerHTML = _omari + " Is a computer Programmer!";
}
</script>
<h1>Title Example</h1>
<button onclick="omari();">Click me</button>
<div id="slice">
sample text
</div>
</body>
</html>