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);
Related
I have some input type=button which are created dynamically using JavaScript. Here I need to shift those clockwise while click on button. Here is my code:
<!-- Enter your HTML code here -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons Grid</title>
</head>
<body>
<div id="btns" style="width:75%;">
</div>
<script>
for(var i=0;i<9;i++){
var index=i+1;
var element = document.createElement("input");
element.type = "button";
element.value = index;
element.id = "btn"+index;
element.setAttribute("style","width:30%;height:48px;font-size:24px");
var foo = document.getElementById("btns");
//Append the element in page (in span).
foo.appendChild(element);
}
document.getElementById("btn5").onclick=function(){
}
</script>
</body>
</html>
Here I need when user will click one button 5 the buttons present around button5 will move clockwise means button4 will shift to first place without changing its ids.
Something like this?
let container = document.querySelector("#btns");
container.insertBefore(container.lastElementChild, container.firstElementChild);
// or this ?
// container.appendChild(container.firstElementChild);
I suppose you don't need to create the buttons in js. You can create in html code. And just play with innertext of btns. My approach was like this;
btn5.addEventListener('click', () => {
const textofBtn = btn1.innerText;
btn1.innerText = btn4.innerText;
btn4.innerText = btn7.innerText;
btn7.innerText = btn8.innerText;
btn8.innerText = btn9.innerText;
btn9.innerText = btn6.innerText;
btn6.innerText = btn3.innerText;
btn3.innerText = btn2.innerText;
btn2.innerText = textofBtn;
});
but I saw another solution looking like more elegant here is you can check;
let nums=[1,2,3,6,9,8,7,4];
const ids=[1,2,3,6,9,8,7,4];
let btn5=document.getElementById("btn5");
btn5.onclick=function() {
nums.unshift(nums.pop());
for (i=0; i<=7; i++) {
document.getElementById("btn"+ids[i]).innerHTML=nums[i];
}
}
// writed by mark_russellbro1(hackerrank username)
Let's say my current page looks like:
<html>
<head>
<style>
/* I want to get all this as a string.. AS IS */
</style>
</head>
<body>
<script>
function getEntireStyleAsString()
{
var str = "";
/// .... what should be in here?
return str;
}
</script>
</body>
</html>
I'd like a simple function that returns my entire style of my page as a string. Using jquery is fine. I've been researching this for awhile and can't find the answer.
If you just want the first stylesheet on the page you can use the following:
var ele = document.getElementsByTagName('style')[0].innerHTML;
However this will only get the code within that first style tag.
If using jQuery is allowed, you can write something like this:
var styles = $('style');
Which gives a jQuery selection of all styles on the document.
From here, you can do something like:
styles.text();
To get it all as a string. Good luck!
You may use the answer provided by Peter Rasmussen. But if you have more than one <style> tags in your <head> section, you would better use this to pull all styles:
var sts = document.getElementsByTagName('style');
var str = '';
for(i = 0; i < sts.length; i++){
str = str + sts[i].innerHTML;
}
document.write(str);
Got it, nevermind.
<style id='test'>
</style>
$('#test').text()
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.
Currently trying to create a website on a static server. Out of JSON-code it should create the navigation in one frame and in a right sideframe a "previous" and "next" button according to the current position in the hierarchy.
I think the problem is that my "global variables" chap and subchap (which you are gonna find in the code below) cannot be accessed over all the 3 frames. I didn't know a way to simplify the problem, I'm sorry for the large post.
I got all the files on my server if you want to see it live: http://fabitosh.bplaced.net/SkriptET/start.html
Files: http://fabitosh.bplaced.net/SkriptET/
files.json isn't used in the code but clearer to look at than the implementation in json.js
At first the basic structure:
index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="json.js"></script>
<!-- <link rel="stylesheet" href="style.css"> -->
</head>
<frameset cols="300,*,300">
<frame src="navigation.html" name="navigation"/>
<frame src="elladq.html" name="content"/>
<frame src="sidebar.html" name="rightsidebar"/>
</frameset>
</html>
navigation.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="json.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<base target="content">
</head>
<body>
<div id="left">
Die Navigation<br/>
</div>
</body>
</html>
rightsidebar.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="json.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div id="right">
Die Sidebar <br/>
<script type="text/javascript">
alert("I reloaded!");
</script>
</div>
</body>
</html>
Now it's getting a bit complicated. The following parts are out of javascript.js. I'm gonna try to explain my thoughts behind the different parts.
The variables chap and subchap are thought as kind of a memory of the current position in the hierarchy. Depending on what link you click on they should adapt. The navigation-frame should never reload, so I hope they can kinda be saved there. (Big question mark)
$(document).ready(function(){ // DOM needs to exist in order to be able to add stuff in there
//JSON-Data coming out of json.js which also converts it in a way to be accessed by data.chapter[chap].subchapter[subchap]
var chap = 1; //position in the array of the currently open chapter
var subchap = 0; //position in the array of the currently open subchapter
The following part kinda works. The navigation is created according to the JSON-structure. When pressing on a link, the right frame reloads (at least on the ftp-Server, it doesn't locally).
When clicking on a link the variables chap and subchap should take the values of the element number in the array. (-> onclick='..')
//********* Create Navigation out of JSON File *********
for(var i = 0; i < data.chapter.length; i++) {
$('#left').append("<a href='"+data.chapter[i].url+"' target='content'>"+data.chapter[i].title+"</a></b><ul>");
for(var j = 0; j < data.chapter[i].subchapter.length; j++) {
$('#left').append("<li><a href='"+data.chapter[i].subchapter[j].url+"' onclick='chap="+i+"; subchap="+j+"; parent.rightsidebar.location.reload();'>"+data.chapter[i].subchapter[j].title+"</a></li>"); // target="content"; defined in sidebar.html header
}
$('#left').append("</ul>");
}
This is what yet isn't working. The variables chap and subchap do not have the values which I want them to have.
When clicking on the "Next:" link, the subchap should increase by one.
//********* Previous Page / Next Page *********
if (subchap>0){
$('#right').append("<a href='"+data.chapter[chap].subchapter[subchap-1].url+"' target='content' onclick='subchap-=1; parent.rightsidebar.location.reload();'> Previous: "+data.chapter[chap].subchapter[subchap-1].title+"</a><br/>");
} if (subchap<data.chapter[chap].subchapter.length) {
$('#right').append("<a href='>"+data.chapter[chap].subchapter[subchap+1].url+"' target='content' onclick='subchap+=1; parent.rightsidebar.location.reload();'> Next: "+data.chapter[chap].subchapter[subchap+1].title+"</a><br/>");
}
});
In an iframe you can access window.parent
So...
in your main window:
window.cake = "Tasty!"
then in your iframe:
var isTasty = window.parent.cake
Hope this helped!
I believe the reason your chap and subchap variables are not incrementing or decrementing is because of the way you assigned the onclick events. By inlining the javascript like that, you have to have subchap and chap declared at the global level.
Move
var chap = 1;
var subchap = 0;
to the line before
$(document).ready(function(){
so it will look like the following:
var chap = 1;
var subchap = 0;
$(document).ready(function(){
//ready code here
});
You may also want to consider using the jquery .on("click", function(){}).
for(var i = 0; i < data.chapter.length; i++) {
$('#left').append("<a href='"+data.chapter[i].url+"' target='content'>"+data.chapter[i].title+"</a></b>");
var subChapUl = $('<ul class="subchap-list"></ul>');
for(var j = 0; j < data.chapter[i].subchapter.length; j++) {
var subChap = $('<li>'+data.chapter[i].subchapter[j].title+'</li>');
subChap.on("click",subChapClick);
subChapUl.append(subChap);
}
$('#left').append(subChapUl);
}
//at the global level define the following function:
function subChapClick(e) {
e.preventDefault();
var el = $(e.target);
chap = el.attr("data-chap");
subchap = el.attr("data-subchap");
parent.rightsidebar.location.reload();
}
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