How to change attributes of elements using javascript? [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 3 years ago.
Improve this question
How can I change the attributes of using class name or id name (for example ".testing a") using javascript?
Edit. I worded the question the wrong way. What I mean is I want to change the css of the a class.
document.querySelector('.testing a').setAttribute('color','green');
Something like above but the above code is not working.
<div class="testing">
<a>1</a>
<a>2</a>
</div>

You can use querySelectorAll() to get all required elements and use forEach() to loop to through elements and change style.color of element
let elms = document.querySelectorAll('.testing a');
elms.forEach(e => e.style.color = "green")
<div class="testing">
<a>1</a>
<a>2</a>
</div>
Using jQuery
$('.testing a').css('color','green');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testing">
<a>1</a>
<a>2</a>
</div>

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">.

short jQuery solution for a javascript code [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 4 years ago.
Improve this question
Need a jQuery solution of a JavaScript code and more shorter than it is.
Code:
if (event.target.parentElement.parentElement.parentElement.parentElement.getAttribute("class").include("newSearch"))
where event is coming from,
$(document).on('click', '#divCl > #lnkCl', function (event) {
JQuery version : 2.2.4
HTML Code:
<div class"newSearch">
<div>
<div>
<div>
<div id="divCl">
<div id="lnkCl">
</div>
</div>
</div>
</div>
</div>
</div>
This is not the exact code, as we have different use for the divs in between.
Maybe something like this.
$(document).on('click', '#divCl > #lnkCl', function(event) {
if ($(this).parents(".newSearch").length) {
// do your thing
}
});

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>

javascript/html: Remove element by ID on button click [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
In short, what I want to do is make it so when I click a button in my HTML document, I want that button to subsequentely be removed by it's ID, using javascript if possible. I've been searching for a solution with no success, can anyone help me out here?
In your HTML:
<button onclick="deleteSelf(this)">Click me</button>
In your JavaScript:
function deleteSelf(button) {
button.remove();
}
This works:
https://jsfiddle.net/00p4oLfy/
document.getElementById('test').remove();
<p id="test">This is a test</p>
<p id="test2">This is another test</p>
Html
<div>
<button id="ClickMe">Click Me</button>
</div>
Javascript
document.getElementById('ClickMe').remove();

Categories