I want to click on a SPAN.show-more automatically. When i click on it shows hidden text. Its ID is a random number something like: SPAN#yui_3_9_1_10_1397969703476_624.show-more
I use greaseMonkey.
The page is:
https://espanol.answers.yahoo.com/question/index?qid=20091125151524AAvxaLo
My wrong code is:
var i,
list = document.querySelectorAll(".show-more")
for (i = 0; i < list.length; ++i)
{ list[i].click();
}
Maybe I need to wait until the page is full loaded? Do I need a delay?
did you try this? with onclick() method
var i, list = document.querySelectorAll(".show-more")
for (i = 0; i < list.length; ++i)
{
list[i].onclick();
}
Best regards
You can simply call a onclick() event like this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Click</title>
</head>
<body>
<span class="show-none">hello</span>
<span onclick="this.style.backgroundColor = '#f47121'" class="show-more">hello</span>
<span onclick="this.style.backgroundColor = '#128239'" class="show-more">hello</span>
<script type="text/javascript" charset="utf-8">
var i, list = document.getElementsByClassName("show-more");
for (i = 0; i < list.length; ++i)
{
list[i].onclick();
}
</script>
</body>
</html>
There is no built-in, cross-browser function or method to cause a click. One of the best cross-browser solutions I use if ever needed can be found here. Althrough, if you're trying to cause a function to fire it would be best to just call the function.
As per Luxelin's suggestion, jQuery would be the easiest alternative. When using jQuery $(element).trigger('click') would fire a cross-browser click event on the element.
Though there is a way which you can use:
element.onclick = function(){ .. };
if( something )
element.onclick(); // call the handler
DEMO
Related
I tried to show pictures with an array so I can change it per delay, kinda like a slideshow. The problem is, that only the first picture will load. when the counter of the array changes, the picture won't load.
The paths of the images are all correct
<!DOCTYPE html>`enter code here`
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test2</title>
<script>
var bilder = [];
var zeit = 3000;
var p = 0;
bilder[0] = "../Bilder/Bild1.jpg";
bilder[1] = "../Bilder/Bild2.jpg";
bilder[2] = "../Bilder/Bild3.jpg";
bilder[3] = "../Bilder/Bild4.jpg";
function BildAutoWeiter()
{
document.bild.src = bilder[p];
for( var i=0; i<= bilder.length; i++)
{
if(i <= bilder.length)
{
p++;
}
else
{
i = 0;
}
}
setTimeout("BildAutoWeiter()", zeit);
}
</script>
</head>
<body onload="BildAutoWeiter()">
<div>
<img name ="bild" width="100%" height="50%">
</div>
</body>
</html>
You need to use getElementsByName() to choose elements by their name=''. That returns an array of elements that use that name, so to choose a specific one, use an index [index] starting from 0. Do this instead:
document.getElementsByName('bild')[0].src = bilder[p];
That selects the first element that uses name='bild'
Also, the for statement is a bit useless. You could instead do:
function BildAutoWeiter()
{
document.bild.src = bilder[p];
p++;
setTimeout(BildAutoWeiter, zeit);
}
You don't need to put the function name in quotations and you can't have the parentheses while calling the function in setTimeout.
Below is the sample code snippet. What I am trying to do is to get the value deal inside the div tag using getElementsByTagName.
<html>
<head>
<script type="text/javascript">
function test() {
var a = document.getElementsByTagName("body");
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div>deal</div>
</body>
</html>
Heres a simple implementation to get your text - I use querySelector because it is more versatile, but that's an opinion.
document.querySelector('p').textContent = document.querySelector('div').textContent;
<div>deal</div> === <p id="output"></p>
It would be more helpful if you added an ID to the div so you can access it directly, but doing it your way, this code snippet should get it:
var a = document.body.getElementsByTagName("div")[0].innerHTML;
Of course, this assumes that the markup looks you pasted everytime
var elements = document.getElementsByTagName("DIV");
var value;
now elements is a nodelist.
for (var i=0; i < elements.length; i++) {
value = elements[i].innerHTML;
}
if you have multiple div, you have to identify wich one is the one you care about.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='etch_a_sketch.css'/>
<script type='text/javascript' src='etch_a_sketch.js'></script>
</head>
<body>
<div class="outer">
</div>
</body>
</html>
JS:
$(document).ready(function() {
$(function() {
for(i=0; i<16; i++) {
$('<div class="inner"></div>').appendTo('.outer');
}
)};
Hello guys! I've tried looking for an answer here and elsewhere but with no luck. I'm trying to make a jquery 'for' loop that will dynamically make 16 div elements within an outer div container. The code looks sound to me but it's not working. I didn't post the CSS because it's irrelevant. Any help would be much appreciated!
First. You have syntax errors. Last line )}; should be }); .
Next. No need to create a jQuery object twice (there's a syntax too - } should be })).
This line:
$(document).ready(function() {
does the exact same thing as this line:
$(function() {
Reference
So, in summary, you should end up either with this:
$(document).ready(function() {
for(i=0; i<16; i++) {
$('<div class="inner">blah</div>').appendTo('.outer');
}
});
or this:
$(function() {
for(i=0; i<16; i++) {
$('<div class="inner">blah</div>').appendTo('.outer');
}
});
JSFiddle
Try this,
$(function() {
var innerHTML=[];
for(i=0; i<16; i++) {
innerHTML.push('<div class="inner"></div>');
}
$('.outer').html(innerHTML.join(''));
});
Please add jquery library to your page.
$(document).ready (function (){
for (var i=0; i<=16; i++){
$ ('.outer').html($('.outer').html()+"<div class='inner'></div>";
}
});
The above is seriously simple. Try that first. My theory would be that appendTo is not working because the element doesn't already exist? But it should work anyway? Also, you don't need the anonymous function within another.
You appear to be using jQuery, but haven't linked to the library. Add one of the following two lines (or download the file and link to that), depending on which version you want.
1.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
2.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Also there are some problems with brackets not being closed. The following snippet shows it working without the additional anonymous function within the ready handler.
$(document).ready(function() {
for (i = 0; i < 16; i++) {
$('<div class="inner">' + i + '</div>').appendTo('.outer');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
</div>
I want to suggest a better performance , it will speed up the process in case there is a lot of elements
$(document).ready(function() {
var innerDivs = "";
for(i=0; i<16; i++) {
innerDivs +='<div class="inner">blah</div>';
}
$('.outer').append(innerDivs);
});
This will perform better because we will not have to access the DOM tree more than one time
I am new to all this javascript, I was trying to make a crossword. I want a webpage that automatically makes 485 divs inside another div when the page loads. How is it possible to do this with a for loop?
I can see you are new to Stackoverflow as well as Javascript. So...I'll cut you some slack and answer (com'n guys...give a new guy a break).
For future questions, I highly recommend checking out https://stackoverflow.com/help/how-to-ask. It'll help you get prompt, accurate answers. Welcome to Stackoverflow.
http://jsbin.com/nazuwoqe/1/edit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="myContainer"></div>
<script>
var element;
var body = document.getElementById('myContainer');
for(var i=0; i<485; i++) {
element = document.createElement("div");
element.innerHTML = i;
body.appendChild(element);
}
</script>
</body>
</html>
A crossword puzzle isn't going to be a simple project to create. I recommend starting with some more basic tasks and tutorials.
Try this
var BigDiv = document.createElement('div');
// specify BigDiv's param like id, class etc. here
var TinyDiv;
for (i = 0; i < 485; i++) {
TinyDiv = document.createElement('div');
// specify TinyDiv's param like id, class etc. here
BigDiv.appendChild(TinyDiv)
}
//put your BigDiv where you want to, here it's in body
document.getElementsByTagName('body')[0].appendChild(BigDiv);
I have a jQuery application which finds a specific div, and edit's its inner HTML. As it does this, it adds several divs with onclicks designed to call a function in my JS.
For some strange reason, clicking on these never works if I have a function defined in my code set to activate. However, it works fine when calling "alert("Testing");".
I am quite bewildered at this as I have in the past been able to make code-generated onclicks work just fine. The only thing new here is jQuery.
Code:
function button(votefor)
{
var oc = 'function(){activate();}'
return '<span onclick=\''+oc+'\' class="geoBut">'+ votefor +'</span>';
}
Elsewhere in code:
var buttons = '';
for (var i = 2; i < strs.length; i++)
{
buttons += button(strs[i]);
}
var output = '<div name="pwermess" class="geoCon"><div class="geoBox" style=""><br/><div>'+text+'</div><br/><div>'+buttons+'</div><br/><div name="percentages"></div</div><br/></div>';
$(obj).html(output);
Elsewhere:
function activate()
{
alert("Testing");
}
You may want to take a look at jQuery.live(eventType, eventHandler), which binds an event handler to objects (matching a selector) whenever they are created, e.g.:
$(".somebtn").live("click", myClickHandler);
Follows a dummy example, may be this can help you.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
<script type="text/javascript">
$(function() {
$('.go-right').click(function(){
c="Hello world";
$("#output").html(c);
});
});
</script>
</head>
<body >
<div id="output"></div>
<a class="go-right">RIGHT</a>
</body>
</html>
Change this:
var oc = 'function(){activate();}'
To be this instead:
var oc = 'activate();'