I'm having some problems swapping two HTML elements in JavaScript. In the HTML below I want to switch the divs with id of "ans1" with that of id "ans2" using the buttons with id "down1" and "up1".
I don't want to specifically select "ans1" and "ans2" because this is an ordering quiz and the first child element of container 1 and 2 may need to be moved again using these same buttons.
<div id="quiz" class="quiz-container d-none">
<div id="question" class="quiz-question"></div>
<div id="container1" class="answer-container">
<div id="ans1" class="answer"></div>
<div class="button-container">
<button id="down1" class="down first-button"><i class="fas fa-chevron-down"></i></button></div>
</div>
<div id="container2" class="answer-container">
<div id="ans2" class="answer"></div>
<div class="button-container">
<button id="up1" class="up1"><i class="fas fa-chevron-up"></i></button><button id="down2" class="down"><i class="fas fa-chevron-down"></i></button>
</div>
In JavaScript I've been trying various versions of the code below. Sometimes the two elements just disappear and sometimes the whole parent element switches position instead of just the child. Can anyone please let me know the correct syntax for switching these two elements so that the child elements can be switched multiple times using the same button?
$('#container1:first').appendTo( $('#container2') );
Pretty easy to do with vanilla JS.
document.getElementById('btn').addEventListener('click', () => {
const c1 = document.getElementById('c1');
const c2 = document.getElementById('c2');
c2.appendChild(c1.firstElementChild);
c1.appendChild(c2.firstElementChild);
});
<div id="c1">
<div>item 1</div>
</div>
<div id="c2">
<div>item 2</div>
</div>
<button id="btn">switch</button>
N.B. this relies on the fact that I'm appending an element to the end of the container, so the firstElementChild will still pick up the correct element. You can store these elements in vars before you do the swapping if needed.
I think that this link will help you to solve your problem
How to swap div using Jquery .
Apparently you can not set two divs with the same id using jquery that is why he set a third variable to achieve his goal
Thank you for your response. The code works to a certain extent. When I push my "down1" button the 2 elements do switch positions but when I push it again to swap them back, the buttons instead switch positions. When I push the button again(which is now in a wrong position)the elements then switch back and I have to push the button a 4th time to get the buttons back to the way they were too. I've also tried to select a 2nd Id "up1" button to also carryout the same function but this button doesn't work at all. Do you have any ides on on to fix this. I'll share my current code below
document.getElementById("down1", "up1").addEventListener('click', () => {
answerTwoContainer.appendChild(answerOneContainer.firstElementChild);
answerOneContainer.appendChild(answerTwoContainer.firstElementChild);
});
<div id="quiz" class="quiz-container d-none">
<div id="question" class="quiz-question"></div>
<div id="container1" class="answer-container">
<div id="ans1" class="answer"></div>
<div class="button-container">
<button id="down1" class="down first-button"><i class="fas fa-chevron-down"></i></button></div>
</div>
<div id="container2" class="answer-container">
<div id="ans2" class="answer"></div>
<div class="button-container">
<button id="up1" class="up"><i class="fas fa-chevron-up"></i></button><button id="down2" class="down"><i class="fas fa-chevron-down"></i></button>
</div>
</div>
Related
I'm having a problem locating an item to click that is related to a specific "row" in a div using the .click() function in Cypress.io. Below is my example div table:
<div class="table">
<div class="col-sm-10">Item 1</div>
<div class="col-sm-2 action">
<i class="fa-times-circle-o"></i>
</div>
<div class="col-sm-10">Item 2</div>
<div class="col-sm-2 action">
<i class="fa-times-circle-o"></i>
</div>
</div>
What I want to do is click on the A link for a specified row. For example, I want to click on the A link for the "row" that contains the text of Item 2. I need to do this dynamically because the order of the items, as well as the names of the items, may change depending upon data.
I'm trying something like this:
cy.get('div:contains("Item 2")').click()
But the div is not the clickable one, it is the following A in the code. Any ideas?
According to Best Practices | Cypress - Selecting elements, the best way to do it is using dedicated data-cy attribute for your cypress tests, and then, within the tests, using CSS attribute selectors.
Best Practice: Use data-* attributes to provide context to your selectors and insulate them from CSS or JS changes.
In your case, I would do it this way:
<div class="table">
<div class="col-sm-10">Item 1</div>
<div class="col-sm-2 action">
<i class="fa-times-circle-o"></i>
</div>
<div class="col-sm-10">Item 2</div>
<div class="col-sm-2 action">
<i class="fa-times-circle-o"></i>
</div>
</div>
cy.get('[data-cy="item-2-anchor"]').click();
I strongly recommend doing it this way project-wide, as it guarantees working tests despite any changes made to other attributes (id, class, href ..) under development.
cy.contains('div', 'Item 2').next().find('a').click()
Could anyone please explain why for the given HTML
<body>
<div id="ustack1">
Block 1:
<div id="0"> 0 </div>
<div id="1"> 1 </div>
<div id="2"> 2 </div>
<div id="3"> 3 </div>
<div id="4"> 4 </div>
<div id="5"> 5 </div>
<div id="6"> 6 </div>
<div id="7"> 7 </div>
<div id="8"> 8 </div>
<div id="9"> 9 </div>
<div id="10"> 10 </div>
</div>
<div id="stagingDiv" style="display:inline-block;">
Block 2:
</div>
</body>
And the corresponding javascript
var cards = document.getElementById("ustack1").children;
for(i=0;i<cards.length;i++){
document.getElementById("stagingDiv").appendChild(cards[i]);
}
(As seen in this jsfiddle: https://jsfiddle.net/73oszkj9/ )
that the odd elements are being skipped over?
cards is a live HTMLCollection. When you perform the appendChild, you're moving the node to another place in the DOM, which removes it from the collection. One solution is to just iterate over cards until its length is zero:
while(cards.length > 0){
document.getElementById("stagingDiv").appendChild(cards[0]);
}
Here's an updated fiddle: https://jsfiddle.net/Lkvdep52/
If it makes you feel any better, this is a mistake that many of us have made at one time or another ;-) Using the browser debugger is a good way to understand the underlying cause for problems like this.
When you use pure appendChil you are cutting the exact element from its parent. Add cloneNode to make a copy of that elements:
var cards = document.getElementById("ustack1").children;
for(i=0;i<cards.length;i++){
document.getElementById("stagingDiv").appendChild(cards[i].cloneNode(true));
}
At the end you can remove children of first parent if needed.
I want to add the price, name,... to cart that is generated dynamically on html. Before i want to get those values to that button. But is not getting me. Here is code
But I have various categories
var b,c,d;
function add(){
for(var i=0;i<1;i++){
b=document.getElementsByTagName("span")[i];
c=document.getElementsByTagName("p")[i];
d=document.getElementByTagName("h4")[i];
alert(b.textContent);
alert(c.textContent);
alert(d.textContent)};
}
<div class="col-sm-9">
<div class="col-sm-2">
<h5></h5>
<img src="defaultimg.png">
<span></span>
<p></p>
<button value="Add to Wishlist" onclick="add()">Add to Wishlist</button>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-2">
<img src="defaultimg.png">
<span></span>
<p></p>
<h5></h5>
<button value="Add to Wishlist" onclick="add()">Add to Wishlist</button>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-2">
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<button value="Add to Wishlist">Add to Wishlist</button>
</div>
</div>
I am able to get only single value that is first one whenever I click button in any div using strictly javascript
Open your console, it will say :
Uncaught TypeError: document.getElementByTagName is not a function(…)
You have a typo, you're missing a s.
d=document.getElementsByTagName("h4")[i];
It breaks your code at the end of loop 1, which is why you get only one value.
This being said, since you have only one <h4> tag, not sure that JS will be happy with d = document.getElementsByTagName("h4")[1]; (Trying to select the second <h4>, which does not exist). It may return undefined, and your code will break again when you try d.textContent, you'll get Cannot access method textContent of undefined. So even after fixing the typo, I believe the code will break after loop 1 for another reason.
Bottom line, I'm not sure you will ever retrieve all your values with this code, it's way too frail and breaks way too easily. You should try and find another way.
I have a really newbie question for you guys. I want to make a page which looks like the img below. And this is how I want it to work: I click one of the two buttons, then change the question/statement to a new one in the exact same place as the one before while the buttons stay the same (without messing up the structure). I tried a few methods from stackoverflow, but I couldn't get it working.
Thanks for your help!
My code looks like this. What I've got so far:
<div class="row" id="pic">
<div class="large-12 columns">
<div align="center">
<img src="justin2.png"/>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="question1"><h1 >This is a german shepherd.</h1></div>
<div class="question2"><h1 >This is rottweiler.</h1></div>
<div align="center" >
<a href="#" id="True" class="button success" >True</a>
<a href="#" id="False" class="button alert" >False</a></div>
You can wrap all you question between one division with relative position and change your question position to absolute.
Because you can have good vision of that, I wrote and implement it in jsfiddle.
You can check the code consist of js, html and css here
I have a php loop that print a lot of html in this form:
<div class="something">
...
<img class="prod-img" src="What-I-Need"/>
</div>
<div class="buttons" data-description="Some text here...">
<a class="activator">Click me!</a>
</div>
That piece of code is repeated many times. Usig jQuery I manage to get the description content using the parent selector just by:
$('.activator').click(function() {
alert($(this).parents('.buttons').data('description'));
})
Since $(this) have a parent with the field I need, that js code is working great, I wonder now, how can I retrieve the src content of the class prod-img? since is outside the parent div...
If they are grouped like this
<div class="container">
<div class="something">
...
<img class="prod-img" src="What-I-Need"/>
</div>
<div class="buttons" data-description="Some text here...">
<a class="activator">Click me!</a>
</div>
</div>
<div class="container">
.....etc....
You can get prod-img by using .closest() and .find()
var src = $(this).closest('.container').find('.prod-img').attr('src');
Otherwise you need to use .parent() .prev() and .find() which is very static making it harder to change the HTML markup without changing the code.
var src = $(this).parent().prev().find('.prod-img').attr('src');