I have a function as follows:
function textNext(element, num) {
document.getElementById("lblContent").innerHTML = "hello";
}
However, the text of the lblContent label won't change when the function is called.
What am I doing wrong?
btw : lblContent is of type asp:Label
Since lblControl is a server side ASP.NET control, you will need to use the control ClientID property in order to use it in javascript:
function textNext(element, num) {
document.getElementById(<"%=lblContent.ClientID%>").innerHTML = "hello";
}
Check the console in your browser for errors. I tried to reproduce your problem in a standard HTML/Javascript environment.
This works for me.
<html>
<head>
<title>Test</title>
<head>
<body>
<div id="lblContent">Previous text</div>
Change text
<script type="text/javascript">
function textNext() {
document.getElementById("lblContent").innerHTML = "Next text";
}
</script>
</body>
</html>
Related
<!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
My localStorage returns null, and I don't know why, the read function is not used, but just for help I put it anyway. Chrome says that it cannot ste innerHTML into null, and my troubleshooting alert info also returns null, but the code goes to the end. Any help would be useful, thank you. The cookie:
<!doctype html>
<html>
<head>
<cookie>
<script>localStorage.setItem('id',Math.floor(Math.random()*10))
</script>
</cookie>
</head>
<body>
<script>var id = localStorage.getItem('id')
alert(id)</script>
</body>
</html>
The Script:
<!doctype html>
<html>
<head>
<script>
var theId=localStorage.getItem('id')
function change(id,target){
var info = localStorage.getItem(id);
alert(info)
document.getElementById(target).innerHTML=info;
}
function read(){
var element=document.createElement('h1')
element.innerHTML='You Want To Read'
document.body.appendChild(element)
alert('debug')
}
</script>
</head>
<body>
<input type="button" value="Read" name="read_story" id="read_story"
onclick=read();change(theId,info)>
<p id='info'>initial</p>
</body>
<script>
alert('debug');
</script>
</html>
You've misinterpreted the error message.
If it can't set the innerHTML of null then you have something.innerHTML = a_value. It is the something that is null not anything to do with local storage.
In change(theId,info), info is a variable. It is a reference to the element with id="info".
You use it here: document.getElementById(target).
info (now target) gets converted into a string ("[object HTMLParagraphElement]").
There is no element with id="[object HTMLParagraphElement]", so you get null.
When you call the function, you need to pass a string, not a variable.
I rarely have to do any Javascript and I seem to fail doing the easiest tasks. I am trying to replace a string in two divs. The first div gets replaced, the second one is not found with the error message:
drawings.html:20 Uncaught TypeError: Cannot set property 'innerHTML' of null
However I tried the usual remedies of putting my code in an 'onload' function and putting the script at the end of the body tag. What else could possibly go wrong?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="cell1">test<div>
<div id="cell2">test<div>
<script>
window.onload = function() {
replace();
}
function replace() {
console.log("replace");
document.getElementById("cell1").innerHTML = "cell1";
document.getElementById("cell2").innerHTML = "cell2";
}
</script>
</body>
</html>
just close your divs elements.
<html>
<head>
</head>
<body>
<div id="cell1">test</div>
<div id="cell2">test</div>
<script>
window.onload = function() {
replace();
}
function replace() {
console.log("replace");
document.getElementById("cell1").innerHTML = "cell1";
document.getElementById("cell2").innerHTML = "cell2";
}
</script>
</body>
</html>
I was wondering instead of using the alert function to show the function result if there was a way to print it in a text field on the same page as the original variable input. Thanks!
create a div in your body for result like
<div id="result"></div>
update from script like
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = <your value>
Without additional libraries, using only browser functions, you can do this with the document.getElementById() function like this:
<html>
<head>
<title>test</title>
</head>
<body>
<input type="text" id="textfield">
</body>
<script>
function someFunction() {
return "Hello world!";
}
document.getElementById('textfield').value = someFunction();
</script>
<html>
The following produces no visible input text field. What gives?
<!DOCTYPE html>
<head>
</head>
<body>
<script>
var my_input = document.createElement('INPUT');
my_input.type="text;
my_input.value = "blah";
document.body.appendChild(my_input);
</script>
</body>
</html>
You have a syntax error in your code
my_input.type="text;
should be
my_input.type="text";
Check this out
Easy way
document.write("<input type=\"text\"...blah blah...></input>");
Or correct your error
my_input.type="text;
to
my_input.type="text";
Note: Change the ...blah blah...