This question already has answers here:
Why can't I call a function named clear from an onclick attribute?
(3 answers)
Closed 6 years ago.
I have the following html code to clear web storage data after click the button "Clear storage".
The explorer (chrome and firefox) just never trigger the function clear after click the button of clear storage.
The code is:
<html>
<head>
<script>
function clear() {
console.log();
localStorage.clear();
refreshContents();
alert("all cache data cleared!");
}
function refreshContents() {
var str = "";
alert("in refresh");
for (var i = 0, len = localStorage.length; i < len; i++) {
var k = localStorage.key(i);
var v = localStorage.getItem(k);
str += "'" + k + "' = '" + v + "'<br />";
}
alert("after for loop");
key.value = "";
value.value = "";
content.innerHTML = str;
}
</script>
</head>
<body>
<div class="content"> <!-- end .content -->
<p>This is the logout page.</p>
<p>All temporary data will be erased after logout.
<p> </p>
<input type="button" onclick="clear();" value="Clear Storage" />
Contents of Local Storage:<br />
<span id="content"></span>
</body>
</html>
Can someone help please.
Thanks in advance!
Changing the function name did the trick. Just change your function name from clear to anything say clearABC and it will work.
function clearABC()
{
}
The reason for this in this post: is clear a reserved word in javascript
Hope this helps,
Cheers
Happy coding !!
<script type="text/javascript">
function clear() {
console.log();
localStorage.clear();
refreshContents();
alert("all cache data cleared!");
}
function refreshContents() {
var str = "";
alert("in refresh");
for (var i = 0, len = localStorage.length; i < len; i++) {
var k = localStorage.key(i);
var v = localStorage.getItem(k);
str += "'" + k + "' = '" + v + "'<br />";
}
alert("after for loop");
key.value = "";
value.value = "";
content.innerHTML = str;
}
</script>
Update Script tag
I think this one help you
Related
<script>
var y="<br>"
function repeater(num){
for (var i=0;i<num;i++)
{document.write(y) }
}
document.write(repeater(4))
</script>
My goal is to make the tag appear
4 times, not the actual breaks. The result shows undefined.
Since the question is asking for Javascript solution not JQuery (since no jQuery tags), I'll add the answer using Javascript.
<script>
var y = "<br>"
function repeater(num) {
for (var i=0; i < num; i++) {
document.body.innerText += y;
}
}
repeater(4);
</script>
or maybe you need to set a text into the spesific element (<div id="app"><div>)? no problem, we can improve the code a little bit.
<script>
var y = "<br>"
function repeater(el, num) {
for (var i=0; i < num; i++) {
el.innerText += y;
}
}
var el = document.getElementById('app');
repeater(el, 4);
</script>
<script>
var res = "";
var y="<br>";
function repeater(num){
for (var i=0;i<num;i++) {
res = res + y;
}
$('#customDiv').text(res);
}
(repeater(4))
You can put a custom <div id="customDiv"></div> inside your html file.
I have the following piece of code I am working on. My purpose is to be able to grab information about different users from a specific website, display the name and other info and then have a button that when clicked, prints more information. I am able to get the information and display the name and picture, but when I click the button the information is displayed at the top of the page, not under the specific button that was clicked. I want for the information to be display under each user... I am new to Javascript and learning on my own, any help is appreciated!
function getUsers(user) {
var out = "";
var i;
for (i = 0; i < user.length; i++) {
out += '' + user[i].login + '<br>'+'</br> <img src="'+user[i].avatar_url+
'" alt="Image" style="width:304px;height:228px"</br></br>'+
'<button onclick=printRepos("'+user[i].repos_url+'")>Repositories</button></br>'+'<div id="id"></div>';
}
document.getElementById("id01").innerHTML = out;
}
Printing Function
function printF(array) {
var out = "";
var i;
for (i = 0; i < array.length; i++) {
out += array[i].id+'</br>';
}
document.getElementById("id").innerHTML = out;
}
This works fine. I just made div with dynamic ids and passed it to the function
function getUsers(user) {
var out = "";
var i;
for (i = 0; i < user.length; i++) {
out += '' + user[i].login + ' <br>'+'</br> <img src="'+user[i].avatar_url+
'" alt="Image" style="width:304px;height:228px"</br></br>'+
'<button onclick=printRepos("'+user[i].repos_url+'","'+i+'")>Repositories</button></br>'+'<div id="'+ 'id' + i +'"></div>';
}
document.getElementById("id01").innerHTML = out;
}
function printRepos(array, id) {
var out = "";
var i;
for (i = 0; i < array.length; i++) {
out += array[i].id+'</br>';
}
console.log('id' + id);
document.getElementById('id' + id).innerHTML = out;
}
Add the "this" keyword as a parameter to your onclicks, to pass in the button that was clicked:
<button onclick=printRepos(this,"'+user[i].repos_url+'")>Repositories</button>
Then locate the next div after that button in your event handler:
function printF(btn, array) {
var out = "";
var i;
for (i = 0; i < array.length; i++) {
out += array[i].id+'</br>';
}
// find the div
var d = btn; // start with the button
while (d.tagName != "DIV") d = d.nextSibling; // look for the next div
d.innerHTML = out;
}
I want to display the content in my div but the code won't work. Please show me how to do it.
<!DOCTYPE html>
<html>
<body>
<p id="display"></p>
<script>
var i;
for (i = 0; i < 11; i++) {
var disp = "the number is " + i;
console.log(disp);
}
disp = document.getElementById("display").innerHTML;
</script>
</body>
</html>
How can I get the loop to display my variable in my selected div? Which part of my code is wrong? please help.
Tehre are multiple problems
<p id="display"></p>
<script>
var i;
//initialize the value
var disp = '';
for (i = 0; i < 11; i++) {
//concatenate the value of disp so that new value will be added to the previous content other wise the values will be overwritten
disp += "the number is " + i;
console.log(disp);
}
//assign value of disp to the elemet innerHTML
document.getElementById("display").innerHTML = disp;
</script>
Set the innerHTML inside the for loop.
for (var i = 0; i < 11; i++) {
var disp = "the number is " + i;
document.getElementById("display").innerHTML = disp;
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
}
IF you want to display all the content at once
var disp = ''; // Assign empty string
for (var i = 0; i < 11; i++) {
disp += " the number is " + i; // Concat message
}
document.getElementById("display").innerHTML = disp; // Add into html
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Because you never write anything to your HTML page. You just display it in your console. And later you assign the HTML content of the #display element to the variable disp, which doesn't make any sense:
disp = document.getElementById("display").innerHTML;
This is how it will work
<!DOCTYPE html>
<html>
<body>
<p id="display"></p>
<script>
var i;
for(i=0; i<11; i++){
var disp = "the number is " + i;
// This just writes to the javascript console
console.log(disp);
// This writes in the #display element on your page
document.getElementById("display").innerHTML += disp + '<br>';
}
</script>
</body>
</html>
var i;
for(i=0; i<11; i++){
var disp = "the number is " + i;
console.log(disp);
}
document.getElementById("display").innerHTML = disp;
Something like this should be fine
function createDivs(){
var pContainer = document.getElementById("display");
var i;
for(i = 0; i < 11; i++){
var message = "the number is " + i;
console.log(message);
var element = document.createElement("div");
element.innerHTML = message;
pContainer.appendChild(element);
}
disp = document.getElementById("display").innerHTML;
};
createDivs();
I have a Google Apps Script web app that contains an HTML form with a couple of drop-down lists. When the user submits their choices, a function looks them up in a Google spreadsheet and returns corresponding values in an array. This array could have any length, and I am having trouble getting it to display as an HTML list without having a set list length.
I have this GAS script:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function discern(formObject) {
var stage = formObject.stage;
var service = formObject.service;
var ss = SpreadsheetApp.openById(ID);
var dataSheet = ss.getSheetByName('Sheet1');
var dataRange = dataSheet.getDataRange();
var data = dataRange.getValues();
var array = [];
for(var i = 0; i < data.length; i++) {
if(data[i][1].indexOf(stage) > -1) {
if(data[i][2].indexOf(service) > -1) {
array.push(data[i][0]);
}
}
}
return array;
}
And this HTML:
<script>
function printList(array) {
var div = document.getElementById('results');
var list = HtmlService.createHtmlOutput('<ul>');
for (var i = 0; i < array.length; i++) {
list.append('<li>' + array[i] + '</li>');
}
list.append('</ul>');
}
</script>
<form id="myForm">
<h3>Farming Stage</h3><br>
Select your farming stage.<br>
<select name="stage">
<option etc etc etc
</select><br>
<h3>Services</h3><br>
Select the service for which you are looking<br>
<select name="service">
<option value= etc etc etc</option>
</select><br>
<br><input type="button" value="Discern"
onclick="google.script.run
.withSuccessHandler(printList)
.discern(this.parentNode)"/>
</form>
<ul id="results"></ul>
(I've replaced some sections with "etc" to save space. The form itself is not the issue.)
Anyway, right now the app returns nothing. Earlier I had the printList function as:
function printList(array) {
var div = document.getElementById('output');
div.innerHTML =
'<ul><li>' + array[0] +
'</li><li>' + array[1] +
'</li><li>' + array[2] +
'</li><li>' + array[3] +
'</li><li>' + array[4] +
'</li></ul>';
}
This version worked, but it was limited to 5 list slots, and the unused slots showed up as "undefined," which was annoying.
Does anyone have any suggestions? Was I close with the 'for' loop in my printList function? Is there another simple way to go about this? I would really appreciate any help or feedback.
Thanks,
Bill
You get the div results do you mean to append the list to the html?
<script>
function printList(array) {
var div = document.getElementById('results');
var list = HtmlService.createHtmlOutput('<ul>');
for (var i = 0; i < array.length; i++) {
list.append('<li>' + array[i] + '</li>');
}
list.append('</ul>');
// ?
div.innerHTML = list.getContent();
}
</script>
edit Also I think you need to getContents of the html Object.
You could not use the HTMLService. Personally I never got it to work the way I wanted it to when I used it. (a couple years ago).
Why not use your loop and just append the string to the div like this.
<script>
function printList(array) {
var div = document.getElementById('results');
var list = '<ul>');
for (var i = 0; i < array.length; i++) {
list += '<li>' + array[i] + '</li>';
}
list += '</ul>';
div.innerHTML = list;
}
</script>
For whatever reason, it worked when I did it this way:
...<br><input type="button" value="Discern"
onclick="google.script.run
.withSuccessHandler(showThings)
.discern(this.parentNode)"/>
</form>
<p>List of services:</p>
<ul id="things">
<li>Waiting...</li>
</ul>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
function showThings(array) {
var list = $('#things');
list.empty();
for (var i = 0; i < array.length; i++) {
list.append('<li>' + array[i] + '</li>');
}
}
</script>
In android phonegap application, I created 5 or more question with respective option (checkboxes) in div dynamically. Each question and respective option have same id. Now I want to know how many question are answered/how many questions are not answered while clicking submit button.
please guide me. Thanks in advance.
My code is:
for dynamic div: retrive value from local database
function list(results){
for (i = 0; i < results.rows.length; i++) {
$("#poll").append("<li id='"+i+"'>"+results.rows.item(i).ques+"</li>"+"<br/>" );
var optiontypearray = new Array();
var arr = results.rows.item(i).option;
var optiontypearray=arr.split(" ");
for(var j=0; j<optiontypearray.length; j++) {
$("#poll").append("<input id='"+i+"' name='ckbox' value='"+optiontypearray[j]+"' type='checkbox'/>"+optiontypearray[j]+"<br/>");
}
}
}
for submit button:get question with respective answer
function submit(){
$answers = $(':checked');
var $questions=$('li');
$answers.each(function(index,el) {
var list1=$(this).attr("id");
alert("list1:"+list1);
var val=$('#'+list1).val();
alert($questions.eq(list1).html() + ' : ' + $(el).val());
});
}
HTML:
<div id="poll">
This is what happens when you click submit button.
$('#submit').click(function () {
var questionsAnswered = questionsNotAnswered = 0
var arrQuestions = new Array();
$('li').removeAttr('style').each (function (i) {
if ($(this).children('input:checked').length > 0) {
var ans = '';
$(this).children('input:checked').each(function () {
ans+= $(this).val() + ', ';
});
arrQuestions[questionsAnswered] = new Array($(this).attr('id'), ans);
questionsAnswered++;
} else if ($(this).attr('class') == 'required' && $(this).children('input:checked').length == 0) {
$(this).css({border : '1px solid red'});
questionsNotAnswered++;
alert($(this).clone().children('span').remove().end().text());
}
});
$('div#finalResults').html("Questions Answered : " + questionsAnswered + "<br /> Questions Not Answered : " + questionsNotAnswered);
});
$.each (arrQuestions, function () {
$('div#finalResults').append("<br /> Q: " + this[0] + " A: " + this[1]);
});
Demo. http://jsfiddle.net/tmM76/9/
Please note that the code in list() function might change as per your existing code which you did not share ;-).
u can do something like..
var qanswered;
for( j = 0; j < numberofQuestions; j++){
qanswered = false;
ques = questions[j];
for( k = 0; k < ques.choices.length; k++){
btn = $('.ui-page-active input#'+k); // k is your choice id whatever way u define it
if(btn[0].checked){
qanswered = true;
}
}
if(!qanswered){
//this question is not answered, do something
}
}
btn gets the jquery object of the inputs one by one, of the ques