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")
}
Related
I'm trying to grab an input value with javascript and render it into a div element. What do I do to make it work?
I'm using querySeclector to grab the input value. When I hardcode it like this:
document.getElementById("result").innerHTML = "Hello World";
It works but doesn't when I replace "Hello World" with the variable that stores the input value and when I do a console.log, I get nothing back even though there are no errors.
HTML
<body>
<div id="container">
<div id="values">
<input id="firstinput" type="text" placeholder="Enter 2 positive figures">
<button id="submit">Submit</button>
</div>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
JAVASCRIPT
let submitButton = document.querySelector("#submit"),
showResult = document.getElementById("result").innerHTML,
weightsForLeftAndRightSides = document.querySelector("#firstinput").value;
submitButton.addEventListener("click", weightBalancer);
function weightBalancer() {
showResult = weightsForLeftAndRightSides;
console.log(weightsForLeftAndRightSides);
}
you need get input value inside weightBalancer when sumbit button clicked
function weightBalancer() {
var weightsForLeftAndRightSides = document.querySelector("#firstinput").value;
document.getElementById("result").innerHTML = weightsForLeftAndRightSides;
}
if i understood your question, you can write this code to put the user input in div tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA_Compatible" content="ie=edge">
<title> Test</title>
<script >
/*to put the user input in div tag*/
function myFunction(){
const userInput=document.querySelector("#firstinput");
const output=document.querySelector("#result");
output.innerHTML=userInput.value;//this parte overwrite the first input
}
</script>
</head>
<body>
<body>
<div id="container">
<div id="values">
<input id="firstinput" type="text" placeholder="Enter 2 positive figures">
<button id="submit" onclick="myFunction()">Submit</button>
</div>
<div id="result"></div>
</div>
</body>
</html>
Hope this helps
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>
Jets File : https://cdnjs.cloudflare.com/ajax/libs/jets/0.14.0/jets.min.js
Html File :
<!DOCTYPE html>
<html>
<head>
<script src="assets/jets.js"></script>
</head>
<body>
<script>
var jets = new Jets({
searchTag: '#jetsSearch',
contentTag: '#jetsContent'
});
</script>
<input type="search" id="jetsSearch">
<div id="jetsContent">
<div>Barry Williamson</div>
<div>Francis Reeves</div>
<div>…</div>
</div>
</body>
</html>
I want to get this result
Jets.js
Search field for several words
You're HTML is out of order. It should look like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jets/0.14.0/jets.min.js"></script>
</head>
<body>
<input type="search" id="jetsSearch">
<div id="jetsContent">
<div>Barry Williamson</div>
<div>Francis Reeves</div>
<div>…</div>
</div>
<script>
var jets = new Jets({
searchTag: '#jetsSearch',
contentTag: '#jetsContent'
});
</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 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>