Why two "document.write(document.links[i].href)" is error? - javascript

I'm beginner in Javascript.
I'm learning Browser Object Model.
Then, I had a error message from Chrome console.
My codes are below.
<html>
<head>
<title>
</title>
<meta charset="UTF-8" />
<script type="text/javascript">
function showLinks() {
showLinks_NOT_ERROR1();
showLinks_NOT_ERROR1();
showLinks_WANTED_BUT_ERROR();
}
function showLinks_NOT_ERROR1() {
console.log(document.links[0].href);
console.log(document.links[1].href);
}
function showLinks_NOT_ERROR2() {
alert(document.links[0].href);
alert(document.links[1].href);
}
function showLinks_NOT_ERROR3() {
document.write(document.links[0].href);
}
function showLinks_WANTED_BUT_ERROR() {
document.write(document.links[0].href);
document.write(document.links[1].href);
}
</script>
</head>
<body onload="showLinks();">
google
yahoo
</body>
</html>
As you could see in showLinks_NOT_ERROR3, just one document.write(document.links[0].href); has no error but two document.write(document.links[0].href); document.write(document.links[1].href); has error.
Why does this error happen?

Further to my comment:
When using document.write always note:
'document.write()' is used to write to the document stream.
Calling 'document.write()' on a closed document stream automatically calls document.open(), which will clear the document.
See the correct answer marked in this post:
document.write clears page
<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body>
google
yahoo
<script type="text/javascript">
function showLinks() {
showLinks_NOT_ERROR1();
showLinks_NOT_ERROR2();
showLinks_WANTED_BUT_ERROR();
}
function showLinks_NOT_ERROR1() {
console.log(document.links[0].href);
console.log(document.links[1].href);
}
function showLinks_NOT_ERROR2() {
alert(document.links[0].href);
alert(document.links[1].href);
}
function showLinks_NOT_ERROR3() {
document.write(document.links[0].href);
}
function showLinks_WANTED_BUT_ERROR() {
document.write(document.links[0].href);
document.write(document.links[1].href);
}
showLinks();
</script>
</body>
</html>
This code should work for you. Here the showLinks function is called before the document stream is closed.

Related

Translate the text of a textarea and store it in another textarea (without API)

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea id="textetrad" rows="5"></textarea>
<textarea id="translated-text" rows="5"></textarea>
<button id="run-translation" onclick="runTranslation();">Translate</button>
<script>
function runTranslation() {
var data = document.getElementById("textetrad").value;
var trad = LanguageApp.translate(data, 'en', 'es');
document.getElementById("translated-text").value = trad;
}
</script>
</body>
</html>
Hello, I am creating a bar lateral and I have a problem. I would like to create a textarea where we insert what we want and it is translated in another textarea. I have tried different methods like LanguageApp.translate(data , 'en', 'es') but I can't get this function to work in the HTML code.
So already is what I want possible without using an API?
If yes, should I do it only in the HTML code or should I make the HMTL code and the .gs communicate?
And then how do I transmit the translation from the gs code to the HTML?
I tried and made it work on apps script using LanguageApp
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
</head>
<script type="text/javascript">
function runTranslation() {
google.script.run.withSuccessHandler(onSuccess).translate(document.getElementById('textetrad').value);
}
function onSuccess(data) {
document.getElementById('translated-text').value = data;
}
</script>
<body>
<textarea id="textetrad" rows="5"></textarea>
<textarea id="translated-text" rows="5"></textarea>
<button id="run-translation" onclick="runTranslation();">Translate</button>
</body>
</html>
Code.gs:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function translate(textValue){
// automatically identify the language, then translate to spanish
return LanguageApp.translate(textValue, '', 'es');
}
Process:
upon onclick, execute runTranslation.
when translate function (in Code.gs) runs with no issue, proceed with onSuccess
passing the translated data, assign it to the other element
Output:
Reference:
HTML Service: Communicate with Server Functions

Ask about jquery function operation [duplicate]

This question already has answers here:
How to prevent a click on a '#' link from jumping to top of page?
(24 answers)
Closed 2 years ago.
I'm student and it hasn't been long since I studied programming.
below code is simplified than real for explain.
'test()' is actually Ajax function to get data.
My goal is making 'a tag' for paging operation.
But when i clicked 'a tag', 'test()' inside of '$(document).ready' is called after 'a tag' click event occurred.
So page is always back to 1.
I don't know why this happen.
Anyone could help me?
Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
var page = 1;
$(document).ready(function(){
test();
alert(page);
});
function test(){
for(var i = 1; i <= 3; i++) {
var a = $("<a></a>").text(i).attr({
href: "",
idx: i
});
a.preventDefault;
$(a).click(function(){
page = $(this).attr("idx");
test();
alert(page);
});
$("#pageLink").append(a," ");
}
}
</script>
</head>
<body>
hello!
<div id="pageLink"></div>
</body>
</html>
For some reason you're calling test() inside of test(). There are a few minor things you need to change also
Prefix jQuery objects with $. var $a=... to avoid ambiguity.
preventDefault is used on the event, not the jQuery object. $a.click(function(event){event.preventDefault();...});
Otherwise it works as I believe you want it to, alerting the page number on click.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
createLinks();
});
function createLinks(){
for(var i = 1; i <= 3; i++) {
var $a = $("<a></a>").text(i).attr({
href: "",
idx: i
});
$a.click(function(event){
event.preventDefault();
page = $(this).attr("idx");
// why are you calling this again? // test();
// maybe you want to load something // loadSomething(page);
alert(page);
});
$("#pageLink").append($a," ");
}
}
</script>
</head>
<body>
hello!
<div id="pageLink"></div>
</body>
</html>

Dojo publish - subscribe not working

The code below is a simple abstraction of what I want to do - it deals with publish and subscribe of the dojo event model. My aim is to publish an event, and subscribe a method to that event.
<html>
<head>
<script>
dojoConfig={async:true, parseOnLoad: true}
</script>
<script type="text/javascript" src="dojo/dojo.js">
</script>
<script language="javascript" type="text/javascript">
require(["dojo/topic","dojo/domReady!"],
function(topic){
function somethod() {
alert("hello;");
}
try{
topic.publish("myEvent");
}
catch(e){
alert("error"+e);
}
//topic.publish("myEvent");
try{
topic.subscribe("myEvent", somethod);
}catch(e){alert("error in subscribe"+e);}
});
</script>
</head>
<body></body>
</html>
I get no alerts, not even in try and catch blocks. Developer console also shows no errors. Is this the correct way to handle publish and subscribe?
You're very close but have made one little mistake. You're subscribing to the topic after you're publishing to it, so you're not catching it. If you put the pub after the sub it'll work.
Here's your sample with slight modifications and comments:
<html>
<head>
<script>
dojoConfig={async:true, parseOnLoad: true}
</script>
<!-- I used the CDN for testing, but your local copy should work, too -->
<script data-dojo-config="async: 1"
src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js">
</script>
<script language="javascript" type="text/javascript">
require(["dojo/topic","dojo/domReady!"],
function(topic){
function somethod() {
alert("hello;");
}
try{
topic.publish("myEvent");
/* ignored because no one is subscribed yet */
}
catch(e){
alert("error"+e);
}
try{
topic.subscribe("myEvent", somethod);
/* now we're subscribed */
topic.publish("myEvent");
/* this one gets through because the subscription is now active*/
}catch(e){
alert("error in subscribe"+e);
}
});
</script>
</head>
<body></body>
</html>

Dropzone not showing when using jquery post

I have a function that receives data from a server and shows a dropzone.js form,
function requestData() {
// showDropzone(); // displaying dropzone from here works,
$.post("/userids/",null, function(data, status) {
jsonarray = JSON.parse(data);
showDropzone(); // here, it calls the function but dropzone is not displayed
});
}
function showDropzone(){
$("#content").html('<form id="dropzone" action="/target" class="dropzone"></form>');
}
Dropzone doesn't show when I call it from inside the post method, but it does when I call it from outside of it. I have no idea what is causing this, there is no error or warning, and I've tried with all possible dropzone configurations, but even forceFallback set to true doesn't work.
EDIT:
Here is the complete html,
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="dropzone.js"></script>
</head>
<body>
<div id="container">
<div id="content"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
requestData();
});
function requestData() {
// showDropzone(); // displaying dropzone from here works,
$.post("/userids/",null, function(data, status) {
jsonarray = JSON.parse(data);
showDropzone(); // here, it calls the function but dropzone is not displayed
});
}
function showDropzone(){
$("#content").html('<form id="dropzone" action="/target" class="dropzone"></form>');
}
</script>
</body>
</html>
:D I bet form#dropzone adds to the #content, but you don't see it ... because it's EMPTY!! (no input inside) :D Check out my fiddle!
http://jsfiddle.net/U5wCw/
Change your code to
$("#content").html('<form id="dropzone" action="/target" class="dropzone"><input type="text"/></form>');

function accessing between two or more scripts

I have two scripts and I need to use script1 function in script2. Whats the best way to do it and Is there any simplification using prototype to access function in more scripts. I am using jquery.
script1
$(function(){
function process(){
// some code
}
})
script2
$(function(){
// I would like to use the process function here
}
Sample.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type="text/javascript" charset="utf-8" src="Script1.js" ></script>
<script type="text/javascript" charset="utf-8" src="Script2.js" ></script>
<script>
</script>
<BODY onload='calling();'>
</BODY>
</HTML>
Scrip1.jc
function call(){
alert("Hi i am called from script2");
}
Scrip2.js
function calling(){
call();
}
Hope this help you.
You can use javascript functions as variables. So just reread your question about the same stuff about variables - Unable to access variable
So just do so your function will be available from global scope.
Just move the function declaration outside the ready event handler, that will make it globally available.
Another idea: use objects:
var Ob = {
process: function(callback) {
callback();
}
}
script1
$(function(){
Ob.process(function(){
... // code
});
});
script 2 (do same)
$(function(){
Ob.process(function(){
... //another code
});
});
If you are using same process function (means same body content, make same thing in both script) then
var Ob = {
process: function() {
...//put code
}
}
script1
$(function(){
Ob.process();
});
script 2 (do same)
$(function(){
Ob.process();
});

Categories