We Keep Coding

innerHtml and for loop

i want to write a short code i have multi contenteditable divs and i use a function to put the value of the div to a textarea please check with me
var myContentArr = ["myContent1", "myContent2", "myContent3", "myContent4", "myContent5", "myContent6"];
var hiddenArr = ["hidden1", "hidden2", "hidden3", "hidden4", "hidden5", "hidden6"];
function myFunction(){
for (var i = 0; i < hiddenArr.length; i++) {
document.getElementById(hiddenArr[i]).value =
for (var i = 0; i < myContentArr.length; i++) {
document.getElementById(myContentArr[i]).innerHTML
}
}
return true;
}

how to prevent filter to make empty array?

function addSelected(id) {
var feedFound = false;
var selList = [] ;
for (var i = 0; i < vm.feeds.length; i++) {
if (vm.feeds[i].id == id) {
if (vm.rationList.length > 0) {
for (var j = 0; j < vm.rationList.length; j++) {
if (vm.feeds[i].id == vm.rationList[j].id) {
feedFound = true;
break;
}
}
}
if (!feedFound) {
selList.push(vm.feeds[i]);
vm.feeds[i] = vm.feeds.filter(function(item) {
return item.id === vm.feeds[i].id;
});
}
feedFound = false;
}
}
var li = [];
angular.copy(selList, li);
for (var i = 0; i < li.length; i++) {
vm.rationList.push(li[i]);
}
vm.rationListSafe = vm.rationList;
}
This is how i add elements from one list to another with filtering. The problem is, for each filtered element, I get back an empty array. Is there anyway I can solve this?

If you are looking for only one item in your array, use find() instead of filter()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
PS: find may return null so you should always null-check
Example:
const foundItem = vm.feeds.find(function(item) {
return item.id === vm.feeds[i].id;
});
if (foundItem) {
vm.feeds[i] = foundItem
}

Is there a way to get the Complete String using a portion of it using JavaScript?

In a GridView, the name of the table is getting generated dynamically. but it will have the dynamic Name with GridView ID gets appended.
something Like "w123443dsfnsbd32dkkd_GridView1". so first part will always keep changing whenever we reloads the grid. so I would like to get the name of the Grid with "_GridView1", with this I would like to fetch the complete Grid Name. So Is there a way to look for this?
I tried this var table = document.getElementById("GridView1"); but didn't work.
Code:
var table = document.getElementById("wcwidget_df5339c463eedb_widget_gridView1");
if (table.rows.length > 0) {
for (var i = 0 ; i < table.rows.length; ++i) {
if (table.rows[i].cells[0].innerText == "Company1" || table.rows[i].cells[0].innerText == "Company2" ||
table.rows[i].cells[0].innerText == "Company5" )
{
for (var k = 1; k < table.rows[i].cells.length; ++k) {
table.rows[i].cells[k].style.fontWeight = "bold";
table.rows[i].cells[k].style.color = "black";
}
}
}
for (var i = 0 ; i < table.rows.length; ++i) {
if (table.rows[i].cells[0].innerText == "Risk" || table.rows[i].cells[0].innerText == "Medium Risk" || table.rows[i].cells[0].innerText == "High Risk" ) {
table.rows[i].cells[0].style.fontWeight = "bold";
table.rows[i].cells[0].style.color = "black";
}
}
}

try this:
document.querySelectorAll("[id*='GridView1']")
this will return an array.

On modern browsers see the #amit's answer.
If compatibility with older browsers is required:
var allElements = document.getElementsByTagName("*");
for (var i = 0, n = allElements.length; i < n; ++i) {
var element = allElements[i];
if (element.id.endsWith("_GridView1")) {
// do something with the found element
break;
}
}

Remove all #div id from domtree with class .selected

How to remove all divs with id #divs with class .something with vanilla javascript.
For example:
function removeEl() {
var removeEl = document.querySelectorAll('.selected');
if (removeEl.length > 0) {
for (var i = 0; i < removeEl.length; i++) {
var elem = document.getElementById("box1");
elem.remove();
}
}
}
This will delete all div box1 but I want to delete all box1 with class .selected

Simply use:
for (var i = 0; i < removeEl.length; i++) {
removeEl[i].remove();
}
You already selected all elements which you want to remove. So it's not necessary to select it again with a given id.

function removeEl() {
var removeEl = document.querySelectorAll('.selected');
if (removeEl.length > 0) {
for (var i = 0; i < removeEl.length; i++) {
//var elem = document.getElementById("box1");
removeEl[i].parentNode.removeChild(removeEl[i]);
}
}
}

JS: Change row background color on specific column value

I am working on this table that as to be managed by the client. I want to know if is possible to change the color of the entire row when in the "Status" column he writes the word "vermietet".
In this case when the client write "vermietet" the rows that contains that word change background color in orange.
Any JS tips?
Thanks in adivce.
EDIT:
I tried this
<script>
jQuery(document).ready(function($){
$(document.body)var cols = document.getElementsByClassName('column-10');
for (var i = 0; i < cols.length; ++i) {
var col = cols[i];
if (col.innerHTML === 'vermietet') {
var parent = col;
while((parent = parent.parentElement).tagName !== 'TR');
var found = parent.childNodes;
for (var j = 0; j < found.length; ++j) {
var td = found[j];
if (td.tagName === 'TD') {
td.style.backgroundColor = 'orange';
}
}
}
}
});
</script>

Pure JS solution:
var cols = document.getElementsByClassName('column-10');
for (var i = 0; i < cols.length; ++i) {
var col = cols[i];
if (col.innerHTML === 'vermietet') {
var parent = col;
while((parent = parent.parentElement).tagName !== 'TR');
var found = parent.childNodes;
for (var j = 0; j < found.length; ++j) {
var td = found[j];
if (td.tagName === 'TD') {
td.style.backgroundColor = 'orange';
}
}
}
}