I'm just starting web development, and have a function loadTweets that pulls from another file and displays, and when I get rid of the button, and just run it directly as an anonymous function it works, however, for some reason the button does not work to call the function.
Any help would be greatly appreciated, thanks!
<html>
<head>
<script src="jquery.js"></script>
<script src="data_generator.js"></script>
</head>
<button type = "button" onclick="loadTweets"> Load </button>
<body>
<script>
$(document).ready(function(){
var loadTweets = function(){
var $body = $('body');
$body.html('');
var index = streams.home.length - 1;
while(index >= 0){
var tweet = streams.home[index];
var $tweet = $('<div></div>');
$tweet.text('#' + tweet.user + ': ' + tweet.message);
$tweet.appendTo($body);
index -= 1;
}
}
});
// });
</script>
</body>
</html>
You need define the function outside the document-ready handler and to use () with function
<button type = "button" onclick="loadTweets()"> Load </button>
<script>
var loadTweets = function(){
//
});
</script>
However I would suggest you to use unobtrusive event handler.
HTML, Add an ID attribute to button
<button type="button" id="loadTweets"> Load </button>
Script, then use ID selector to target the element and .on() to bind event handler.
$(document).ready(function () {
var loadTweets = function () {
//existing code
}
$('#loadTweets').on('click', loadTweets)
});
You can use in another way
<html>
<head>
<script src="jquery.js"></script>
<script src="data_generator.js"></script>
</head>
<body>
<button type = "button" onclick="loadTweets()"> Load </button>
<script>
function loadTweets(){
var $body = $('body');
$body.html('');
var index = streams.home.length - 1;
while(index >= 0){
var tweet = streams.home[index];
var $tweet = $('<div></div>');
$tweet.text('#' + tweet.user + ': ' + tweet.message);
$tweet.appendTo($body);
index -= 1;
}
}
</script>
</body>
</html>
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;
};
I am making a extension theme for my Chromebook that searches coding sites (like this site, w3schools, ect.) How sould I make it? This is my code so far:
<html>
<head>
</head>
<body>
<input id="input1">
<button onclick="searchGoogle()">Search Google</button>
<script>
function searchGoogle() {
var one = document.getElementById("input1").value;
var two = 'http://www.google.com/search?q=' + one;
window.location = two;
}
</script>
</body>
</html>
My code doesn't work
When it runs, this pops up:
(Image of my code running)
Is my code wrong?
Any help will be aapreciated.
EDIT
<html>
<head>
<script src="searchgoogle.js">
</script>
</head>
<body>
<input id="input1">
<button id="link">Search Google</button>
</body>
</html>
and
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
function searchGoogle() {
var one = document.getElementById("input1").value;
var two = 'https://www.google.com/search?q=' + one;
window.location = two;
}
});
});
Didn't work either
You declare the function searchGoogle inside the listener function but it is never called. Try with:
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
//there is no need to declare a new function here.
var one = document.getElementById("input1").value;
var two = 'https://www.google.com/search?q=' + encodeURIComponent(one);
window.location = two;
});
});
I need to pass generated Random number from JS function to the html div, but its not able to pass it on,here is my code snippet
<html>
<head>
</head>
<body>
<button id="order" onclick="getRand()">orderId</button>
<div id="order_id"></div>
<script>
var getRand = function () {
var elem = Math.floor(Math.random() * 89999 + 10000);
document.getElementById("order_id").innerHTML = elem.value;
};
</script>
</body>
</html>
Try with this: Working example :
<html>
<body>
<head><h1>CRS</h1></head>
<button id= "order" onclick="getRand()">orderId</button>
<div id="order_id">ff</div>
<script>
var getRand = function() {
var elem = Math.floor(Math.random()*89999+10000);
document.getElementById("order_id").innerHTML = elem;
};
</script>
</body>
</html>
You just change elem.value to elem
Check This Answers it is working good
var getRand = function() {
var elem = Math.floor(Math.random()*89999+10000);
document.getElementById("order_id").innerHTML = elem;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id= "order" onclick="getRand()">orderId</button>
<div id="order_id">ff</div>
This is works fine when i am using addEventListener. But, it is not working when i use button.click . what is the mistake on the below code? what is the cause it is not working on varNext.click= myFunc;?
[code]
<!doctype html>
<html>
<head>
<title>Slideshow</title>
<script type="text/javascript">
var images = ['home_default.png','about_default.png','blog_default.png','logo.png'];
function myFunc(){
var var1 = document.getElementById("slideimage");
var var2 = var1.name.split("_");
//alert(var2);
index = var2[1];
if(index == images.length - 1){
index = 0;
}else {index++;}
var1.name = "image_" + index;
var1.src = images[index];
}
</script>
</head>
<body>
<p><img id="slideimage" name="image_0" src="home_default.png" alt="Home"></p>
<form name="slideform">
<input type="button" id="nextbtn" value="Next">
</form>
<script type="text/javascript">
var varNext = document.getElementById("nextbtn");
//varNext.addEventListener("click", myFunc, false);
varNext.click= myFunc;
</script>
</body>
</html>
[/code]
Rather than .clickfires the element's click event it must be .onclickproperty returns the onClick event handler
Try this
varNext.onclick = myFunc;
Demo Fiddle of your code
You need to use the onclick attribute
varNext.onclick = myFunc;
I am making my first foray into javascript + jQuery, designing a simple page but encountering errors, I'm sure it's something silly but I've been over the code several times and can't spot it.
The error I receive is below:
The entire code is below (I've changed the dynamic '#' + elementname + 'perc' to a string and I get the same error), can anyone offer any insight?
<DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<!--<script src="js/dealercalc.js"></script>-->
<script type="text/javascript">
$(document).ready(function(){
$(".val-adjust").click(function(){
var name = $(this).attr('name');
var bit = $(this).attr('value');
setvalue(name,bit);
//discountbits['basic'] = false;
//$("#basedisper").text(discountlist['basic']);
});
$("#basdisyes").click(function(){
discountbits['basic'] = true;
//$("#test1").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val(gettotal());
});
}
);
function getpercbypurc(value){
return 0;
};
function setvalue(elementname,yesno){
discountbits[elementname] = yesno;
if (yesno) {
$("#basicperc").hmtl(discountlist[elementname] + "%");
} else {
$('#' + elementname + 'perc').hmtl("0%");
}
};
function gettotal() {
var total = 0;
for (var i=0; i<keys.length; i++){
if (discountbits[keys[i]] = true) {
total += discountlist[keys[i]];
}
}
return total;
};
function displaytotal(){
$('#totalper').html(gettotal());
};
var keys = ['basic', 'marketing'];
var discountlist = {
basic:20,
marketing:2
};
var discountbits = {
basic:true,
marketing:false
};
</script>
</head>
<body>
Base Discount<br>
<button class="val-adjust" name="basic" value="false">No</button>
<button class="val-adjust" name="basic" value="true">Yes</button>
<span id="basicperc">0</span>
<br>
<br>
Marketing Plan<br>
<button class="val-adjust" name="marketing" value="false">No</button>
<button class="val-adjust" name="marketing" value="true">Yes</button>
<span id="marketingperc">0</span>
<br>
<br>
Total<br>
<span id="totalper">0</span>
</body>
</html>
You have wrong spelling for html, hmlt should be html
Change
$("#basicperc").hmtl(discountlist[elementname] + "%");
To
$("#basicperc").html(discountlist[elementname] + "%");
you have a typo
$("#basicperc").hmtl(discountlist[elementname] + "%");
//-----^^^^---here
should be
$("#basicperc").html(discountlist[elementname] + "%");
you've made a typo, it's html not hmtl :)
Very obvious typo. It's html, not hmtl !