How to create Div and its contents from json [closed] - javascript

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 8 years ago.
Improve this question
I have a page with a "click" button in it.By click "counter" value increases.
How can I :
1) create json file for my divs like:
<div class="text1" id="1">1
<p>
content1
</p>
<audio src="sounds/audio1.mp3"></audio>
</div>
<div class="text2" id="2">2
<p>
content2
</p>
<audio src="sounds/audio2.mp3"></audio>
</div>
2) find information for the div that has "id" equal to counter
3) create the div on each "click"
http://jsfiddle.net/KFUVq/14/

I am assuming you want to create divs based off of the current counter number.
If that is the case I like to create HTML in jquery with arrays...
so this
function createElement(counter){
var newEl = [
'<div class="text'+counter+'" id="'+counter+'">' + counter,
'<p>',
'content' + counter,
'</p>',
'<audio src="sounds/audio'+counter+'.mp3"></audio>',
'</div>'
].join("");
$("#divToAppend").append(newEl);
}
somewhere else
createElement(5);

Related

How do I get the value of a child div [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
Good day,
I would like to ask how I can get the value from price. Neither of them has a unique id so it makes things hard for a noob like me. Any suggestions? Thanks.
<div class="modal">
<span class="name">$</span>
<span class="price">0.04</span>
<hr style="background: linear-gradient(to right, #ffc82d , #ffff73);">
<div class="weapon" style="background-image: url('assets/img/free_case_item.png');"></div>
</div>
You can do it with pure JavaScript using DOM manipulation.
Assuming you only have one element with the price class: document.getElementsByClassName("price").item(0).innerText.
Ideally you would give it an ID (e.g. price): document.getElementById("price").innerText
You can try with document.querySelector:
var price = document.querySelector("div.modal span.price").innerText
This matches the first <span class="price"> inside <div class="modal">.

Update favicon via link in text box and button [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 4 years ago.
Improve this question
Sorta like
when you click the button, you get the favicon.ico from the link (using js)
an example ico would be stackoverflow favicon
//this is the js section
//some way to read the text box and Retrieve favicon from link
<button Id=button Onclick=<!--add Update favicon function here -->
Favicon.ico</button>
<input type=box id=field text="input Text here">
If I understand what you're asking correctly, this should work:
function updateFavicon(link){
let exists = $("link[rel*='icon']");
if(exists.length){
$("link[rel*='icon']").attr('href', link);
} else {
$("head").append("<link rel='icon' href='" + link + "'>");
}
}
And then:
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div>
<input type="text" id="link">
<button onclick="updateFavicon($('#link').val())">Update Favicon</button>
</div>

replace HTML list with List added with JS [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 years ago.
Improve this question
my solution: https://jsfiddle.net/thecodesalim/dsvgdkks/2/
HTML:
<div id=leaderboard class="panel hidden">
<h1>Leaderboard</h1>
<ol id=top10>
<li>Jyn Erso</li>
<li>Mon Mothma</li>
<li class="me">Han Solo</li>
<li>Galen Erso</li>
<li>Thane Kyrell</li>
<li>Norra Wexley</li>
<li>Ciena Ree</li>
<li>Malakili</li>
<li>R5-D4</li>
</ol>
</div>
JS:
function updateLeaderBoard(arr,me){
let players = document.getElementById("top10");
for(let i =0; i < arr.length;i++){
let li = document.createElement("li");
li.appendChild(document.createTextNode(arr[i]));
players.append(li);
if(arr[i].includes(me)) li.classList.add("me");
}
}
updateLeaderBoard(["Jack","Robo","Simi"],"Robo");
I want the text content to be only the list in javascript, the html list should be replaced.
Thanks
I believe you are saying that the HTML list is a placeholder and you want to clear it out and just insert whatever you want from js? If so, just empty the <ol> when you have selected it:
let players = document.getElementById("top10");
players.innerHTML = "";

how to get the full html element using jquery? [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 6 years ago.
Improve this question
I want to get all full element using class
<div class="number">one</div>
<div class="address">addr1</div>
<div class="number">twod</div>
I want what are all the div having class name number, I want output full content with tags one by one using foreach statement. The expected output is like below
<div class="number">one</div>
<div class="number">two</div>
$('.number, .address').each(function() {
console.log(this.outerHTML)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="number">one</div>
<div class="address">addr1</div>
<div class="number">twod</div>

Change text in class with deferent text [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 8 years ago.
Improve this question
Is it possible with jQuery to append a different word at the end of each node with a same class ?
For example:
<p class="xyz">Some text</p>
<p class="xyz">Some another text</p>
<p class="xyz">Text somewhere</p>
would then be:
<p class="xyz">Some text word1</p>
<p class="xyz">Some another text word2</p>
<p class="xyz">Text somewhere word3</p>
Thanks
Use:
$('.xyz').each(function(i){
$(this).html($(this).html()+" word"+(i+1));//or $(this).text($(this).text()+" word"+(i+1));
});
Working Demo
Look at this:
$('.xyz').each(function(i){
var count = i+1;
$(this).html($(this).html()+ "word" + count)
});
http://jsfiddle.net/y9043kdn/1/

Categories