We Keep Coding

Javascript scrollIntoView(); not loading

hi i am making a website for me and i wanted to use the javascript scrollIntoView(); function. the function does work in the console on my site but not in the text where i am currently working in below is the function and the corresponding code.
<script>
let aboutus = document.querySelector("#aboutus");
let contact = document.querySelector("#contact");
let gotoAboutUs = document.querySelector("#gotoAboutUs");
function navigateAboutUs(e) {
aboutus.scrollIntoView({ behavior: "smooth" });
}
gotoAboutUs.addEventListener("click", navigateSimran, false);
</script>
this is where i want to go
<div class="p-5 Simran" id="aboutus">
<div class="row flex-wrap px-5">
<div class="card-header ml-5">
<img src="images/test.jpg" alt="" style="max-height: 400px; max-width: 400px;">
</div>
<div class="card-block px-2 mx-3">
<h3 class="card-title"><strong></strong></h3>
<p class="card-text"><h5><br></h5></p>
</div>
<div class="w-100"></div>
</div>
</div>
and this is the button
<a class="nav-link navButton mavenPro" href="#" id="gotoAboutUs"><h3>Wie zijn wij</h3></a>
the button does nothing currently.
thanks for your time

Linking to ids will scroll the element into view.
Add some css:
body {
scroll-behaviour: smooth;
}
Then link the id:
Go to about us

Javascript keeps modal hidden

I'm having 2 small issues with some JS below involving a modal and cloning/appending an image:
A button click opens the modal, the modal contains a search bar which populates the content with images. When an image is clicked, it's cloned and appended into another div (outside of modal on the main page) and the modal is closed.
After this is done one time, the button click no longer opens the modal again. How can I alter so that the appending of the images closes the modal but it can be re-opened?
Also, once the image is appended to a new div, if I click it it disappears. Is there a way to only append the image source without the class tag so that clicking on it in the new div won't make it disappear?
function appendSomeItems(url, id, name, style) {
return '<div><div class="md-card md-card-hover"> <div class="gallery_grid_item md-card-content getImage"> <img class ="uk-align-center imageClick" src="https://media.testsite' + url + '" alt=""></a> <div class="gallery_grid_image_caption"> <span class="gallery_image_title uk-text-truncate">' + name + '</span> <span>' + style + '</span> </div></div></div></div>';
}
$(document).on('click', '.imageClick', function handleImage() {
console.log('good');
var img = $(this).closest(".getImage").children("img").clone(true);
$("#holdImage").html('');
$("#holdImage").append(img);
$('#image-modal').hide();
});
<!--image placeholder->
<div id="holdImage" style="margin-top: 15px;">
</div>
<!--open modal-->
<div style="text-align: center;">
Choose an existing image
</div>
<!--Modal-->
<div id="image-modal" class="uk-modal">
<div class="uk-modal-dialog" style="width:80%;">
<a class="uk-modal-close uk-close"></a>
{!! Form::open(array('id' => 'search_form')) !!}
<div class="uk-grid">
<div class="uk-width-1-1">
<div class="md-card">
<div class="md-card-content">
<div class="input-group">
<input type="text" class="md-input" placeholder="Search" name="srch-term" id="srch-term">
<p class="text-center">Search for images by Name </p>
</div>
</div>
</div>
</div>
</div>
{!! Form::close() !!}
<br/>
<div id="imageResult" class="gallery_grid uk-grid-width-medium-1-5 uk-grid-width-large-1-6" data-uk-grid="{gutter: 16}">
</div>
<button style="display: none;" id="hidden_button"></button>
</div>
</div>

Main problem seems to be that you are hiding the entire modal using Jquery's hide() message (which will set display:none; on the element) rather than calling the modal's hide() message. This has also been mentioned on the Git repository as can be seen here.
Solution would be to call the proper hide method like so:
var modal = UIkit.modal("#image-modal");
modal.hide();
instead of
$('#image-modal').hide();
Regarding the other question: remove the class that has the click handler attached before adding it to the #holdImage placeholder:
var img = $(this).closest(".getImage").children("img").clone(true);
img.removeClass("FillInClassNameHere");
$("#holdImage").html('');
$("#holdImage").append(img);
As I don't have the class name for it, you will need to change FillInClassNameHere with the proper class name in your code.

Duplicate html when adding to textarea?

I have this little js which adds divs and its content on a click as plain text in the textarea:
var content = " ";
jQuery('body').on('click', '.btn_video', function() {
if(jQuery(this).text()=="ADD") {
jQuery(this).text("REMOVE");
jQuery(this).parents(".thumbnail").parent().addClass('selected');
} else{
jQuery(this).text("ADD");
jQuery(this).parents(".thumbnail").parent().removeClass('selected');
}
jQuery('.selected').each(function(){
content += jQuery(this).prop('outerHTML');
});
jQuery('#usp-custom-5').val(content);
});
This is the html that is added on a click
<div class="col-xs-12 col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/'+e.id+'?rel=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="caption">
<p>Duration: <span class="video-time">'+YTDurationToSeconds(e.contentDetails.duration)+'</span></p>
<button type="button" class="btn btn-danger btn-block btn_video"><strong>ADD</strong></button>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/'+e.id+'?rel=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="caption">
<p>Duration: <span class="video-time">'+YTDurationToSeconds(e.contentDetails.duration)+'</span></p>
<button type="button" class="btn btn-danger btn-block btn_video"><strong>ADD</strong></button>
</div>
</div>
</div>
<textarea id="usp-custom-5"></textarea>
I want to be able to add each html content when I click on the button without having repeated content and also be able to remove the single content when a user clicks on the button.
In the following jsfiddle if I click on the Add button i get repeated content

add var content = ''; at the beginning of your click function.
https://jsfiddle.net/q5070aa4/5/
what was happening before is that you were taking whatever content existed and adding whatever element text that was "selected" - and this would produce your duplicate data. you want to clear out the textarea on click so that only the "selected" elements text shows

try this: you can add remove selected class to div and read all div with selected class to get content and replace it in text area
jQuery(function(){
jQuery(".btn.btn-danger.btn-block").on("click", function(){
var text = $(this).text();
if(text=="ADD") {
jQuery(this).find("strong").text("REMOVE");
jQuery(this).closest(".col-xs-12.col-md-4").addClass("selected");
} else if(text == "REMOVE") {
jQuery(this).find("strong").text("ADD");
jQuery(this).closest(".col-xs-12.col-md-4").removeClass("selected");
}
var content = "";
jQuery(".col-xs-12.col-md-4.selected").each(function(){
content += '<div class="col-xs-12 col-md-4">' + $(this).html() + '</div>';
});
jQuery('#usp-custom-5').val(content);
});
});
JSFiddle Demo

<a> element not working properly when hiding parent?

I made this script, and despite one oddity, it works fine. It's hiding/showing the parent of div element with a class containing specific content. The problem when I press my <a> elements, that act as buttons, they "filter" the divs, but it leaves the first comment <a>? If I change the element do a <div> instead no problem, but with an <a> element it behaves weirdly? Is this just a bug or?
here is a JSFiddle: https://jsfiddle.net/g1puxhs7/2/
HTML:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<a class='viewBtn'>Published<a>
<a class='viewBtn'>Completed<a>
<a class='viewBtn'>Created<a>
<div class="orders" id="orders">
<div class="row">
<div class="status">
Completed
</div>
<a>Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a>Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a>Comment</a>
</div>
</div>
<style>
.row {
width: 200px;
margin: 10px;
background: #ccc;
padding: 4px;
}
</style>
SCRIPT:
//--Filter by Status--//
$('.viewBtn').click(function() {
var txt = $(this).text();
$('.status:contains("' + txt + '")').parent().toggle();
$(this).toggleClass('down');
});

The problem is with your links:
<a class='viewBtn'>Published<a>
<a class='viewBtn'>Completed<a>
<a class='viewBtn'>Created<a>
You have 6 opening a tags, instead of 3 opening and 3 closing tags.
This is why the browser adds closing a tags in your script in a bunch of places, one of them in your first div—and then your whole DOM tree looks different than what you want.

Your markup needed to be cleaned up. Here is your markup cleaned up. Also, i find it best to add href for you anchor tags, and then you can comment them out with #, or you can add javascript:void(0). If you use the # approach, in your JS, you can add e.preventDefault();
HTML Cleaned:
<div>
<a class='viewBtn' href="#">Published</a>
<a class='viewBtn' href="#">Completed</a>
<a class='viewBtn' href="#">Created</a>
</div>
<div class="orders" id="orders">
<div class="row">
<div class="status">
Completed
</div>
<a class="stuff" onclick="Comment">Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a class="stuff">Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a class="stuff">Comment</a>
</div>
</div>
JS with preventDefault():
$('.viewBtn').click(function(e) {
e.preventDefault();
var txt = $(this).text();
$('.status:contains("' + txt + '")').parent().toggle();
$(this).toggleClass('down');
});

How to swap image and video to another div?

I am trying to swap image and the videos when user clicks a selected element
I have something like the following:
<div class='container'>
<h1 class='title'>Title</h1>
<div class='row'>
<div class='main'>
<img class='col-md-7 col-sm-8 img-responsive' src='main.png'/>
</div>
</div>
<div class='row'>
<a href='#' class='component'><video class='video col-md-4 col-sm-4' controls><source src='video1.mp4'/></video></a>
<a href='#' class='component'><video class='video col-md-4 col-sm-4' controls><source src='video2.mp4'/></video></a>
<a href='#' class='component'><img class='col-md-4 col-sm-4 img-responsive' src='img1.png'/></a>
</div>
</div>
I want to swap the image or video to the main div whenever the user click the link. My js
$('.component').on('click', function(){
var mainSrc = $(this).closest('.container').find('.main').html();
var newSrc = $(this).html();
$(this).html(mainSrc)
$(this).closest('.container').find('.main').html(newSrc);
})
My problem is that I am using bootstrap and if I copy the entire html under my main div, it carries the col-md-4 col-sm-4 to the main div. It will shrink the main div width. How do I keep the same class under main div and component a tag?

Take those classes out of the elements and create another wrapper div. You can assign it to .main as well, but I'm not too sure what you're doing with .main, so I'll just leave that alone.
<div class='container'>
<h1 class='title'>Title</h1>
<div class='row'>
<div class='main'>
<div class='col-md-7 col-sm-8 img-responsive'>
<img class='img-responsive' src='main.png'/>
</div>
</div>
</div>
<div class='row'>
<a href='#' class='component'>
<div class='col-md-4 col-sm-4'>
<video class='video' controls><source src='video1.mp4'/></video>
</div>
</a>
<a href='#' class='component'>
<div class='col-md-4 col-sm-4'>
<video class='video' controls><source src='video2.mp4'/></video>
</div>
</a>
<a href='#' class='component'>
<div class='col-md-4 col-sm-4'>
<img class='img-responsive' src='img1.png'/>
</div>
</a>
</div>
</div>
and then you can do something like this to select and swap the media.
$('.component').on('click', function(){
var mainSrc = $(this).closest('.container').find('.main:first-child').html();
var newSrc = $(this).children().first().html();
$(this).html(mainSrc)
$(this).closest('.container').find('.main:first-child').html(newSrc);
})

Given your HTML, here is a jsfiddle of a solution.
$('.component').click(function () {
var clickClass = $(this).children(0).attr("class");
var mainClass = $(".main").children(0).attr("class");
var clickHTML = $(this).html();
var mainHTML = $(".main").html();
$(this).html(mainHTML);
$(".main").html(clickHTML);
$(this).children(0).attr("class",clickClass);
$(".main").children(0).attr("class",mainClass);
});
I have added Bootstrap but don't have the image files.