Onclick is not working when use that as object - javascript

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;

Related

Input that searches google

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;
});
});

Jquery With Button Onclick Function

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>

how to pass return value fo a function to html div in Javascript

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>

Pass jquery variable to iframe src

I want to pass the value which i get from a text box to the src of my iframe. I am using the following code to get the value from textbox, on the button click it should be passed to the iframe src and replace the query:'*' with the variable passed, i.e. the * should be replaced.
How to proceed with this?
Foloowing is the iframe with html code
<iframe src="http://localhost:5601/#/dashboard/New-Dashboard?embed&_a
=(filters:!(),panels:!((col:1,id:env,row:1,size_x:4,size_y:3,type:visualization)
,(col:5,id:env-2,row:1,size_x:4,size_y:3,type:visualization),(col:9,id:env-3,
row:1,size_x:4,size_y:3,type:visualization)),query:(query_string:(analyze_wildcard:
!t,query:'*')),title:'New%20Dashboard')&_g=(refreshInterval:(display:Off,pause
:!f,section:0,value:0),time:(from:now%2Fy,mode:quick,to:now%2Fy))" height="600"
width="800" id="myframe"></iframe>
<!DOCTYPE html>
<html>
<head>
<title>jQuery With Example</title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.btnGetName').click(function (event) {
var name = $('.txtName').val();
alert(name);
});
});
</script>
</head>
<body>
<div>
<input type="text" class="txtName" value="hello" id="querypass"/><br />
<button class="btnGetName">Get Name</button>
</div>
</body>
</html>
Try this
var src = $('#myframe').attr('src');
var newSrc = src.replace("query:'*'", "query:'" + name + "'");
$('#myframe').attr('src', newSrc);
You can try following code:
Note: Assuming that your <iframe> is within same HTML document:
$('.btnGetName').click(function (event) {
var name = $('.txtName').val();
alert(name);
var iframeObj = $("#myframe");
var srcString = iframeObj.attr("src");
srcString = srcString.replace("query:'*'","query:'"+name+"'");
iframeObj.attr("src",srcString );
});
Please make sure that you don't put single quote in your text field.

Maintain div scroll position on postback with html/javascript

Is there a way to maintain the div scroll position on a postback, without using asp? So far I've only found solutions using asp.
http://blogs.x2line.com/al/articles/156.aspx
<!doctype html>
<html>
<head>
<title></title>
<script language="javascript">
// function saves scroll position
function fScroll(val)
{
var hidScroll = document.getElementById('hidScroll');
hidScroll.value = val.scrollTop;
}
// function moves scroll position to saved value
function fScrollMove(what)
{
var hidScroll = document.getElementById('hidScroll');
document.getElementById(what).scrollTop = hidScroll.value;
}
</script>
</head>
<body onload="fScrollMove('div_scroll');" onunload="document.forms(0).submit()";>
<form>
<input type="text" id="hidScroll" name="a"><br>
<div id="div_scroll" onscroll="fScroll(this);" style="overflow:auto;height:100px;width:100px;">
.. VERY LONG TEXT GOES HERE
</div>
</form>
</body>
</html>
Maybe this javascript code works for you
function loadScroll ()
{
var m = /[&?]qs\=(\d+)/.exec (document.location);
if (m != null)
myDiv.scrollTop = parseInt (m[1]);
}
function saveScroll ()
{
var form = document.getElementById ("myForm");
var sep = (form.action.indexOf ("?") == -1) ? "?" : "&";
form.action += sep + "qs=" + myDiv.scrollTop;
}
Now, you can watch for the "submit" event to save the position in the "action" attribute:
document.getElementById ("myForm").addEventListener ("submit", saveScroll, false);
And in your BODY tag...
<body onload="loadScroll ();">
....
</body>
I can't test the code right now, but I think you get the idea.

Categories

Resources