I have the following code that works:
<html>
<head>
<script>
function loaded(){
oFormElement = document.forms['test form'].elements["txtStatus"];
oFormElement.value = "just loaded";
}
</script>
</head>
<body onload="loaded()">
<p>my first socket.io test</p>
<form id = "test form">
<input type="text" id ="txtStatus" value="">
</form>
</body>
</html>
now, if I include the reference to socket.io, it stops working
<html>
<head>
<script src="socket.io/socket.io.js">
<script>
function loaded(){
is this because socket.io handles from elements in it's own way, or is because the browser cannot find socket.io ? Is there any way to debug this/fix this ?
You need to close the first <script> tag...
<html>
<head>
<script src="socket.io/socket.io.js"></script>
<script>
function loaded(){
// ...
Related
I have a problem where my script in HTML page can't call a function outside the HTML file or a function through the library. Here is the HTML code:
`<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylesheet'); ?>
</head>
<body>
<h1>Welcome</h1>
<p>Please enjoy this helpful script.</p>
<?!= include('JavaScript'); ?>
<div>
<label for="sheetLink">Google Sheets Link:</label>
<input type="text" id="myInput">
<button id="myButton" onclick="handleButtonClick()">Click me</button>
</div>
<script>
function handleButtonClick() {
var userInput = document.getElementById("myInput").value;
console.log(userInput);
alert(userInput)
let uwow = LibIdentifier.receiveLink();
Logger.log(uwow);
console.log(uwow);
alert(uwow)
userClicked();
}
</script>
</body>
</html>`
I Expect the code to receive variable uwow from another function, and then do alert from result.
I have tried using google.script.run.functionname(). But it does not work.
What actually resulted is an error like this:
Error on Click
I wanted to modify something in my code and don't really know how to make this work... my code is kinda huge so I am going to explain what I want with an exemple :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<div id="button">OK</div>
<div id="nfa"></div>
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
</body>
</html>
So this is my HTML code, so what I want to do is NOT execute these 3 scripts until the user enters a value in the text input and clicks on OK. That value will be used in the js files, so i have to get the value after I click OK.
Can someone explain how this has to work ?
EDIT : problem was with jQuery that was not executing on Electron, solution : http://ourcodeworld.com/articles/read/202/how-to-include-and-use-jquery-in-electron-framework
For starters I would suggest changing; <div id="button">OK</div> to <button id="button">OK</button>.
I would then suggest to put each of those scripts into functions instead, then you can use the 'onClick' event from the button attribute as follows;
<button id="button" onClick="s1Func();s2Func();s3Func();">OK</button>
A better way would be to have one function call 'init' or something appropriate that then calls the 3 scripts/functions and have your buttons onClick even call that one initialization function.
JSFiddle Example:
https://jsfiddle.net/JokerDan/h7htk9Lp/
I would recommend you to load the scripts dynamically after you click on the button. This can be done via jQuery: https://api.jquery.com/jquery.getscript/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
<title>NFA2DFA</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<div id="button" onclick="loadScripts();">OK</div>
<div id="nfa"></div>
<script>
function loadScripts() {
// Is the input empty?
var value = $("#reg_expr").val();
if (value.length != 0) {
// Loads and executes the scripts
console.log(value); // Displays the value of the input field
$.getScript("script1.js");
$.getScript("script2.js");
$.getScript("script3.js");
}
}
</script>
</body>
</html>
You can use a button tag instead of input tag. I suggest you to use onClick event like this:
<button type="button" onclick="yourFunction()">Click me</button>
When the users click the button yourFunction() is call.
The result is this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<button type="button" onclick="yourFunction()">Click me</button>
</body>
</html>
I have two iframes in the document movie.htm:
<iframe id='movies' class='top' frameborder='0'></iframe>
and
<iframe src="moviesearch.htm" class="bottom" frameborder="0">
Within moviesearch.htm there is an input tag
<input id="search_str" type="text">
I was wondering how I access this value (contained in moviesearch.htm) using JavaScript in the document movie.htm.
As the user is typing the field continuously it would require that the value be updated real-time within movie.htm.
How would I achieve this in JavaScript?
If both pages are in the same domain, you'll be able to iframe.contentDocument. https://developer.mozilla.org/en/XUL/iframe#p-contentDocument
postMessage.
https://developer.mozilla.org/en/DOM/window.postMessage
movie.htm:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Current value:<div id="updatedvalue"></div>
<iframe src="moviesearch.htm"></iframe>
</body>
<script>
window.addEventListener
("message", function(e) {
document.getElementById("updatedvalue").innerHTML = e.data;
}, true);
</script>
</html>
moviesearch.htm:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" onkeyup="sendMessage(this.value)">
</body>
<script>
function sendMessage(message) {
window.parent.postMessage(message, "*");
}
</script>
</html>
please look at the following sample code:
<html>
<head>
<script type="text/javascript">
function myfun()
{
alert('hi');
}
</script>
</head>
<body>
<h1> Hello </h1>
<input type="button" value="MyButton" onClick="myfun()"/>
</body>
</html>
When I run this using php, and when I click on the button, the alert box doesn't come up. However, if I write onclick="alert(hi')" it works fine. What might be the reason?
<html>
<body>
<h1> Hello </h1>
<input type="button" value="MyButton" onClick="alert('hi')"/>
</body>
</html>
Missing a ' in your code...
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.