All browsers except for Internet Explorer properly call the javascript and add them to the page.
I see a lot of posts on JSONP problems in IE, but I haven't come across one in this form. Why is the function issuesToList not called?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="RedmineJSONP.js"></script>
<title></title>
</head>
<body>
<header>
<h1>List of Issues</h1>
</header>
<div id="container"></div>
<script src="http://www.redmine.org/issues.json?callback=issuesToList"></script>
</body>
</html>
function issuesToList(data) {
var count = data.issues.length;
for (i = 0; i < count; i++) {
var issue = data.issues[i];
loadIssue(issue);
}
}
//Create an issue instance and append to Ui
function loadIssue(issue){
var button = document.createElement("button");
button.innerHTML = "+";
button.setAttribute("onClick", "toggleInfo(this)");
var p = document.createElement("p");
var item = document.createElement("div");
item.setAttribute("id", issue.id);
item.setAttribute("class", "issue");
item.appendChild(button);
item.innerHTML += " " + issue.subject;
item.appendChild(p);
var container = document.getElementById("container");
container.appendChild(item);
}
EDIT Removed the double http://
Related
Hey I am new to coding and I'm working on a new chrome App. So far, I am trying to make a button that counts when you click on it. For some reason it's not working. Here's the HTML:
var button = document.getElementById("button"),
count = 0;
button.onclick = function() {
count += 1;
button.innerHTML = "Button: " + count;
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1> This is a "Button" (I think) </h1>
<p> (Or is it?) </p>
<button id="button"> Button: 0 </button>
</body>
</html>
You have to wait until the DOM is loaded. Use the window.onload event:
window.onload = function() {
var count = 0;
const button = document.getElementById('button');
button.onclick = function() {
count += 1;
button.innerHTML = "Button: " + count;
};
};
Edit: I also just noticed you're not including your script in your HTML.
Your missing a variable type on your count.
You want make sure your button has some kind of text inside of it before you actually
start incrementing it.
Lastly you need to get the element from the html with a "document.getElementById("id_goes_in_here")
Try this instead.
document.getElementById("button").innerHTML = ` `; //Make sure to actually pull from your element in the html with this.
let count = 0;
button.innerHTML="Button " + count
button.onclick = function() {
count += 1;
button.innerHTML = "Button: " + count;
};
So I have this HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Background</title>
</head>
<body>
<button id="btn" target="_blank" >CLICK ME</button>
</body>
<script src="js/script.js"></script>
</html>
and this JS code
document.getElementById("btn").onclick = function () {
var test=makeid();
window.open("http://www."+test,'_blank');
};
function makeid()
{
var url = "";
var possible = "abcdefghijklmnopqrstuvwxyz";
for( var i=0; i < 5; i++ )
url += possible.charAt(Math.floor(Math.random() * possible.length));
return url;
}
How to make client jump to this randomly generated URL only if a div(on the page with generated URL) with id="hehe" exists?If it doesn't exist generate URL again.Is it done using AJAX or something else?
i just want to know how to execute this [JSCODE][1] on page load, I'm a newbie and I cant figure it out. I just want to disregard the form or submit button and execute the script on page load. Thank You in advance!
[1]: http://jsfiddle.net/Noumenon72/9X3yZ/8/
Write your code inside anonymous function given below..
$(function() {
//Write your code here
})
Use jquery $(document).ready like this.
$(document).ready(function(){
//task which you want to perform
});
See you code below. I have mentioned where to call these functions.
$(document).ready(function(){
$('#domain').val('http://yourblog.blogspot.com/');
$('#get_tags').click();
});
function getTagsFromFeed(domain){
var myscript = document.createElement("script");
myscript.src = domain + "feeds/posts/summary?alt=json&max-results=0&callback=cat";
document.getElementsByTagName('head')[0].appendChild(myscript);
}
function cat(json){ //get categories of blog & sort them
var label = json.feed.category;
var lst=[];
for (i=0; i<label.length; i++){
lst[i] = label[i].term;
}
displayList(lst.sort()); //use any sort if you need that
}
function displayList(list) {
var mylist = document.getElementById("mylist");
mylist.innerHTML = "";
for (i=0; i<list.length; i++) {
var li = document.createElement("li");
li.appendChild(document.createTextNode(list[i]));
mylist.appendChild(li);
}
urlifyTagsInList(document.forms.myform.host.value);
}
function urlifyTagsInList(hostname){
var mylist = document.getElementById("mylist");
var newlist = document.createElement("ul");
var elements = mylist.getElementsByTagName("li");
for (j=0; j<elements.length; j++) {
var link = document.createElement("a");
var blah = document.createTextNode("blah");
link.href=hostname + "search/label/" + elements[j].innerHTML;
link.appendChild(elements[j].cloneNode(true));
newlist.appendChild(link);
}
mylist.parentNode.replaceChild(newlist, mylist);
newlist.id = "mylist";
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form id="myform" method="POST" onSubmit="getTagsFromFeed(document.forms.myform.host.value); return false;">
<p> Enter blogspot domain (http://yourblog.blogspot.com/):</p>
<input id="domain" type="text" name="host"></input>
<button id="get_tags" type="submit">Get tags</button>
</form>
<ul id="mylist">
</body>
</html>
If you want to use pure javascript, Document ready with pure JavaScript will help you.
A simple way to submit form onload is like this.
$(document).ready(function(){
$('#myForm').submit();
});
I am attempting to use Google Feed API to display three current event listings for our homepage. This is to circumvent some of the issues we are having with a third part calendar application.
However, with the feed limit set to 3, the only listings that will show up for me are from Jan. 18. Is there a way to make the code show only current or future events?
Thanks in advance for any help.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>
JavaScript
google.load("feeds", "1");
var feedcontainer=document.getElementById("feed");
var feedurl="http://25livepub.collegenet.com/calendars/publishers-calendar-7.rss";
var feedlimit = 3;
var rssoutput = '';
function rssfeedsetup(){
var feedpointer=new google.feeds.Feed(feedurl);
feedpointer.setNumEntries(feedlimit) ;
feedpointer.load(displayfeed);
}
function displayfeed(result){
if (!result.error){
var thefeeds=result.feed.entries;
for (var i=0; i<thefeeds.length; i++){
var untrimContent = thefeeds[i].content;
var trimContent = untrimContent.split("<br>", 2);
rssoutput+="<div><a href='" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a></div>" + trimContent;
feedcontainer.innerHTML=rssoutput;
}
} else {
feedcontainer.innerHTML = "Error Loading Events";
}
}
window.onload=function(){
rssfeedsetup();
};
I'm having trouble, grabbing the user input, and having the onclick operator create additional paragraphs with each click.
Here is my HTML code.
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Add Paragraph </title>
<meta charset='utf-8' >
<script src="../js/addPara.js" type="text/javascript"></script>
</head>
<body>
<div>
<input type='text' id='userParagraph' size='20'>
</div>
<div id="par">
<button id='heading'> Add your paragraph</button>
</div>
</body>
</html>
Here is Javascript code:
window.onload = function() {
document.getElementById("addheading").onclick = pCreate;
};
function pCreate() {
var userPar= document.createElement("p");
var parNew = document.getElementById('userParagraph').value;
userPar.innerHTML = par;
var area = document.getElementById("par");
area.appendChild(userPar);
}
userPar.innerHTML = par;
should be
userPar.innerHTML = parNew;
In your code:
> window.onload = function() {
> document.getElementById("addheading").onclick = pCreate;
> };
Where it is possible (perhaps likely) that an element doesn't exist, best to check before calling methods:
var addButton = document.getElementById("addheading");
if (addButton) {
addButton.onclick = pCreate;
}
Also, there is no element with id "addheading", there is a button with id "heading" though.
> function pCreate() {
> var userPar= document.createElement("p");
> var parNew = document.getElementById('userParagraph').value;
> userPar.innerHTML = par;
I think you mean:
userPar.innerHTML = parNew;
if you don't want users inserting random HTML into your page (perhaps you do), you can treat the input as text:
userPar.appendChild(document.createTextNode(parNew));
.
> var area = document.getElementById("par");
> area.appendChild(userPar);
> }
Your variable names and element ids don't make a lot of sense, you might wish to name them after the data or function they represent.
I did it and it worked.
<html lang='en'>
<head>
<title>Add Paragraph </title>
<meta charset='utf-8' >
<script>
window.onload = function() {
document.getElementById("heading").onclick = pCreate;
}
function pCreate() {
var userPar= document.createElement("p");
var parNew = document.getElementById('userParagraph').value;
userPar.innerHTML = parNew;
var area = document.getElementById("par");
area.appendChild(userPar);
}
</script>
</head>
<body>
<div>
<input type='text' id='userParagraph' size='20'>
</div>
<div id="par">
<button id='heading'> Add your paragraph</button>
</div>
</body>
</html>```