Displaying dynamic number of objects on an HTML page [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
<!DOCTYPE html>
<html>
<head>
<title>my site</title>
<script>
// javascript code here
// generates a random number, X, from 1 to 10 each time this page is requested
// displays X number of "blue-object"
</script>
<style>
/*css if needed */
</style>
</head>
<body>
<div class = "blue-object" style="background:blue; margin:20px">This is an instance of a blue object</div>
<div class = "blue-object" style="background:blue; margin:20px">This is an instance of a blue object</div>
</body>
</html>
So currently the page above is static. It always display 2 objects of the "blue-object" class.
I need to make it dynamic. So for the sake of simplicity, the number these objects that gets displayed is a randomly generated number. So how can that be done?

Here you go :
<!DOCTYPE html>
<html>
<head>
<title>my site</title>
<style>
div{
background-color:blue;
margin:20px;
}
</style>
</head>
<body id="main">
<script>
var desiredText="Hey there! change me ;)";
//You can just change the variable to your desired text and that's it :)
var randomRepeater=function(desiredText){
var iterator=Math.floor(Math.random() * 10);
console.log("will create "+iterator+" divs this time :) ");
for(var i=0;i<iterator;i++){
var div = document.createElement("div");
div.innerHTML = desiredText.toString();
document.getElementById("main").appendChild(div);
}
}
randomRepeater(desiredText);
</script>
</body>
</html>

Related

Creating an HTML page from a template with DIFFERENT script files [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 days ago.
Improve this question
What is the most beginner way to put some little changes into an HTML page?
For example, we need to choose between "./textC.js" and "./imgC.js" files, both having function countCows() {} of different algorithms.
I've spent lots of time browsing through "changing script src dynamically" articles, but location.reload() reloads the whole page (or a <div>, I haven't found the pattern yet), some things don't work at all, some answers use complicated high software technologies I have never seen before.
This be the template html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template page</title>
<link id="sizescheme" rel="stylesheet" type="text/css" href="./texty.css" media="screen"/>
</head>
<body class="custombackground">
<div id="commonblock">
<button id="coucow" onclick="countCows()">Count the cows</button>
<div id="countResult"></div>
</div>
<div id="textOnly">
Something that has nothing to do with images
</div>
<script id="counter" src="./textC.js"></script>
</body>
</html>
The caller HTML page has something like this:
<div id="initial-things" >
<button id="txb" onclick="setType("t")"> Text </button><br />
<button id="imb" onclick="setType("i")"> Image </button>
</div>
And could have done this if it were the same page as the template (but scripts do not load dynamically, see the first paragraph):
<script>
function setType(param) {
if (param == "i") {
document.getElementById("sizescheme").href = "./imgy.css";
document.getElementById("counter").href = "./imgC.js";
document.getElementById("textOnly").style.visibility = "collapse";
}
if (param == "t") {
document.getElementById("sizescheme").href = "./texty.css";
document.getElementById("counter").href = "./textC.js";
}
}
</script>
So, how does one create a page from a template?

Override background-color using `!important` [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 months ago.
Improve this question
How do I override class background color?
Tried !important but not working, the text is still yellow.
<!DOCTYPE html>
<html>
<head>
<style>
.myclass {
background-color: yellow ;
}
</style>
</head>
<body>
<p class="myclass" background-color="red !important">This is some text in a paragraph.</p>
</body>
</html>
if you want use inline styles (not good), you should use style attribute on html elements and in any way of using css you should use colon : instead of = for giving value to properties, try this snippet:
<!DOCTYPE html>
<html>
<head>
<style>
.myclass {
background-color: yellow;
}
</style>
</head>
<body>
<p class="myclass" style="background-color:red !important;">This is some text in a paragraph.</p>
</body>
</html>
You need to put inline css in the style attribute like so:
<!DOCTYPE html>
<html>
<head>
<style>
.myclass {
background-color: yellow ;
}
</style>
</head>
<body>
<p class="myclass" style="background-color: red !important;">This is some text in a paragraph.</p>
</body>
</html>
You need to mention style.
<p class="myclass" style="background-color:red !important;">This is some text in a paragraph.</p>

How to show simple json file data on html Page? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I have a json file which shows a number say "12925.09".
How can I show this number on my HTML page?
<html>
<title>HTML Tutorial</title>
<body>
Number =
</body>
</html>
Thanks
Here's one way. Run the script below, comments are within the code.
//Your possible (simple) json data
var numbers = {"number":10}
//Get number div by its id
var numberDiv = document.getElementById("numberDiv");
//Target number divs innerHTML and set it to the number value (10) in your numbers object
numberDiv.innerHTML = numbers.number;
<html>
<title>HTML Tutorial</title>
<body>
<div id="numberDiv"></div>
</body>
</html>

How to add <p> tags using javascript to a <div>? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I want make a that auto scrolls and I want to be able to add paragraph tags to it using javascript.
Any help would be appreciated
var div = document.getElementsByTagName('div'),
p = document.createElement("p");
p.innerHTML = 'I am p Tag';
div[0].append(p);
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div> I am div Tag</div>
</body>
</html>
Depending on properties of your div like Id, name, class, u can also use
document.getElementById etc.
Using jQuery plugin for javascript, you can achieve this like that:
var myDiv = $("#IdOfYourDiv");
var paragraph = document.createElement("p");
paragraph.textContent = "something";
myDiv.append(paragraph);
but next time, pelase insert your html/javascript code, nobody have a crystal ball to know how you are writing your code to help you ;)

How to get element by id inside another element Javascript [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
My code is below. But when I give the above code the element with id "demo" doesn't gets selected. How can I do that in JS?
document.getElementById("demo").onclick = function() {myFunction1()};
function myFunction1() {
document.getElementById("demo").classList.remove("flame");
}
.flame {
color: red;
}
<div class="candle">
<div id="demo" class="flame">Click me</div>
</div>
If my understanding is right, Try using this one
document.getElementById('demo').onclick = function(event) {
callback(event)
}
function callback (event){
var classList = event.target.classList
if (classList.contains('flame')) {
console.log('contains')
classList.remove('flame')
} else {
console.log('notfound')
classList.add('flame')
}
}
.flame {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="candle">
<div id="demo" class="flame">Click me</div>
</div>
</body>
</html>
First Why are your using a method to call another function when you can use onclick directly in the html element also make sure you are including the script in a right way since the function function1 needs to be defined before calling it in the Dom element.
So you can use this in the html element
<div class="candle">
<div id="demo" class="flame" onclick="myFunction1()">Hello</div></div>
And for the Javascript:
function myFunction1() {
document.getElementById("demo").classList.remove("flame");}
You can check the fiddle: https://jsfiddle.net/ytdmk6my/2/

Categories

Resources