Develop Reference

how to use a queryselector on object HTMLInputElement

I am trying that when the text field has focus, the div is selected with the class:autocomplete, this is an example to understand my idea, in my real problem it is more complex. I simply need that once the element that has the focus is identified, select the nearest div with .autocomplete class on the same level, I want to get it this way. I know that in css I should use something like:
input ~ div.autocomplete
($event.target is input in my case)
but I don't know how to do it in this case. Thank you.
function fn_selectAutocompleteClass($event) {
console.log(($event.target));
}
.selectAutocomplete {
background: green;
}
<input id="text" type="text" onfocus="fn_selectAutocompleteClass(event)">
<i class="icon"></i>
<div class="autocomplete">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum itaque placeat, ad vel reprehenderit illo, harum nemo laudantium, dolorem unde aut distinctio! Consectetur vitae deleniti veritatis autem numquam officia eaque.</div>

In this case you can access the .autocomplete using the querySelectorAll on the target elements parent like below snippet. Get the 0th index as that will be the first element matching the selector query.
function fn_selectAutocompleteClass($event) {
console.log($event.target.parentNode.querySelectorAll('.autocomplete')[0]);
}
.selectAutocomplete {
background: green;
}
<input id="text" type="text" onfocus="fn_selectAutocompleteClass(event)">
<i class="icon"></i>
<div class="autocomplete">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum itaque placeat, ad vel reprehenderit illo, harum nemo laudantium, dolorem unde aut distinctio! Consectetur vitae deleniti veritatis autem numquam officia eaque.</div>
Hope this helps :)

How to create function that swaps divs with different ids?

I'm trying to create function in js to swap content of webpage using .style.display = "none" or "block" but the main problem is that there are few different divs with different id's for that. The main aim of doing this is chagning content after clicking specific buttons without loading new page. The biggest problem for me is creating script which will change "id"
independently of what id was before. Normally I could write all of id's one by one and just swap them but this is not the case. Content should be changed automatically so no matter what id was before it will replace for specific one after pressing button.
I have tried with querySelector in many ways by changing id with class, by using remove / set Attribute but none of these methods work for me. Im trying to write this fuction for 2 weeks and I don't have any ideas.
I'm worried that bootstrap classes may cause problem with this...
Can someone help me with this? Any tips?
This is my first post here so if I did something wrong, sorry for that.
I cannot paste here my code as everything is on my company laptop which I left when I was finish my job.

Here is an agnostic approach using no HTML ids or classes.
const container = document.querySelector('.container');
const buttons = container.querySelectorAll('button');
const divs = container.querySelectorAll(':scope > div');
function handleButtonClick() {
this.previousElementSibling.classList.toggle('hide');
}
buttons.forEach(button => {
button.addEventListener('click', handleButtonClick);
});
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.hide {
display: none;
}
<div class="container">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
</div>
jsFiddle

Toggling divs to fade in and out on click

Problem
I have two info boxes that are display:none when a user clicks the first span.highlight shows info box to the side aside.info. If the other span is clicked it shows the alternate second info box. However, clicking on the links a second time, doesn't fade them out/back in
Previously, I didn't have a fadeOut function and instead had bg-one and bg-two fade in and out, but you would still see the previous element before the other faded in, so I feel like the problem is with my if/else statement.
JSFiddle: http://jsfiddle.net/51haqmg3/4/ (scroll until you see two highlighted phrases)
scripts.js
/*-------------------------------------
HIGHLIGHT
--------------------------------------*/
$(".highlight").click(function() {
$(".highlight").removeClass("active"); // Remove active class from spans
$(".fa-plus-circle").show(); // Show the Font Awesome icon
$(this).addClass("active"); // Add an active class to span just
$(this).find(".fa-plus-circle").hide();
$(this).data("clicked", true);
var clicked = $(".highlight").data("clicked");
if (clicked) {
$(".bg-one").fadeOut(500, function() {
$(".bg-two").fadeIn(500);
});
} else {
$(".bg-two").fadeOut(500, function() {
$(".bg-one").fadeIn(500);
});
}
});
index.html
<aside class="info bg-one">
<div class="define">
<p class="background">Background One</p>
<img src="https://placeholdit.imgix.net/~text?txtsize=21&txt=224%C3%97148&w=224&h=148" alt="">
<p class="caption"></p>
<p class="hoarding"></p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, laudantium, excepturi. Neque doloribus praesentium ad. Voluptates animi accusamus iusto laborum aperiam quis, eveniet architecto mollitia labore in laboriosam illum. Facilis.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum perspiciatis minus corporis expedita fugiat excepturi nostrum atque adipisci magnam deserunt, reprehenderit, a fugit, neque esse unde mollitia at nemo. Natus?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quas nulla, voluptatem corrupti vel, maiores delectus fuga dolorum sint, nisi suscipit deleniti, velit? Debitis maxime, necessitatibus similique saepe vel nisi!</li>
</ul>
</div><!-- /.define -->
</aside>

If you just want to detect if the first element was clicked or if it was the second one and then fade out and fade in the corresponding info boxes you could do this:
http://jsfiddle.net/so14L57w/
All I changed was the bool variable to determine which background to switch to:
var fadeOne = $(".highlight").index(this) == 0;
This isn't a great solution though since it won't scale beyond your 2 elements. However you could switch on the $(".highlight") index and load the correct background that way for more than 2 elements.

You're always setting them to true instead of toggling them on each click.
Fix this line:
$(this).data("clicked", true);
to something like:
$(this).data("clicked", !$(this).data("clicked"));
Also the whole block above it:
$(".highlight").removeClass("active"); // Remove active class from spans
$(".fa-plus-circle").show(); // Show the Font Awesome icon
$(this).addClass("active"); // Add an active class to span just
$(this).find(".fa-plus-circle").hide();
should be in the conditional in order for you to be able to cancel their action when clicked is false.

Handler for hovering over an element and all its children

The handler must operate when you hover over an element with a class D1 and when you hover over all his children. How to do it? Tried through the cycle but confused.
<div class="d1">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita inventore nobis cum itaque unde eos aliquam labore reiciendis iusto dolore ducimus tempore quidem et nisi debitis similique ea dignissimos ex.</p>
</div>
Link to the sandbox: Fiddle

You can use mouseenter and mouseleave instead of mouseover and mouseout. These have the functionality you need, provided you're targeting the supported browsers (see links above).
Here's a working jsFiddle from your code: http://jsfiddle.net/rgthree/rs6qm9v5/2/

Dynamically and completely fill a div with placeholder text in javascript

I would like to Fill a div with placeholder text.
I have a div that is 100% width+height. Due to many form factors this height and width will be changing based on the users resolution. How can i dynamically fill that div with lorem ipsum. Also how would i recalculate if window sizes changes? I know i could manually do this with copy paste and overflow hidden but I would rather achieve this in javascript
JSFiddle
css
html,body {
/*background:#edecec;*/
height: 100%;
}
.block-text{
text-align: justify;
font-size: 8px;
font-color: rgba(88,89,91, 1);
font-family: georgia;
line-height: 7px;
}
html
<div class="block-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, eius, ab, molestiae praesentium hic quia quaerat culpa quas consectetur dolor veritatis vel voluptas minus laborum minima quis dolorum necessitatibus tempora.
</p>
</div>

http://jsfiddle.net/h54tP/1/
var bool = true;
var maxHeight = $('.block-text').height();
do {
$('.container').append("<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, eius, ab, molestiae praesentium hic quia quaerat culpa quas consectetur dolor veritatis vel voluptas minus laborum minima quis dolorum necessitatibus tempora. </p>");
if ($('.container').height() > maxHeight) bool = false;
} while (bool);
Here, as described in my comment. One wrapping element insinde your text box, the block-text set to 100% height and a small while loop do the trick.
Small note: This will not do anything when the window is resized. For that, however, you could just call that entire code inside a window-size-change function.
Also, this allows the text to be slightly larger than the screen. If you want it slightly smaller instead, just do
$('.container').children().last().hide();
in the "if"-clause.

I realize you wanted to solve this with javascript, but have you considered using css psuedo-elements with content? If this is just for placeholder text as you develop I think it will do what you want without having to add a bunch of javascript and fiddle with resize events.
.block-text>p:after {
content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, eius, ab, molestiae praesentium hic quia quaerat culpa quas consectetur dolor veritatis vel voluptas minus laborum minima quis dolorum necessitatibus tempora.';
}