Develop Reference

Empty image when trying to change src in javascript

I am trying to change an image and some text in javascript trough a button.I can change the text but no matter what I do if I change the image it's just an image not found icon
Here's my relevant html:
`
<div class="review1">
<img id="student" src="images\review1.png" />
<div id="review1text">
<h1 id="reviewnume">Alina,21</h1>
<p id="reviewtext">
Sunt studenta la Politehnica in Bucuresti si Pitagora.ro m-a ajutat
foarte mult sa aprofundez cunostiintele mele de algebra.Recomand cu
cea mai mare incredere!
</p>
</div>
<i class="fa-solid fa-circle-arrow-left"></i>
<i class="fa-solid fa-circle-arrow-right"></i>
</div>
And here is my javascript:
let btnNext = document.querySelector("fa-solid fa-circle-arrow-right");
let btnprevious = document.querySelector("fa-solid.fa-circle-arrow-left");
btnNext = addEventListener("click", () => {
document.getElementById("reviewtext").textContent =
"Nu am reusit sa ajung la cursurile mele de algebra din cause serviciului.In orice caz,nu a fost mare pierdere deoarece Pitagora.ro m-a ajutat sa recuperez materia fara probleme";
document.getElementById("reviewnume").textContent = "Bogdan,22";
document.getElementById("reviewnume").style.textAlign = "center";
document.getElementById("reviewtext").style.fontSize = "25px";
document.getElementById("reviewtext").style.marginLeft = "20px";
document.getElementById("student").src = "images\review2.png";
});
Again,the text on "reviewnume" and "reviewtext" changes when I click but the image from "review1" to "review2" doesn't,even though they are in the same folder

You are getting this error because you forgot to use the dot(.) operator when finding an element using a class name.
I mean, you did-
let btnNext = document.querySelector("fa-solid fa-circle-arrow-right");
But you should do-
let btnNext = document.querySelector(".fa-solid .fa-circle-arrow-right");
or
let btnNext = document.querySelector(".fa-circle-arrow-right");
You also used the wrong syntax for the event listener.
btnNext = addEventListener("click", () => {...});
but it should be-
btnNext.addEventListener("click", () => {...});
Here is the working demo-
let btnNext = document.querySelector(".fa-circle-arrow-right");
let btnprevious = document.querySelector(".fa-circle-arrow-left");
btnNext.addEventListener("click", () => {
document.getElementById("reviewtext").textContent =
"Nu am reusit sa ajung la cursurile mele de algebra din cause serviciului.In orice caz,nu a fost mare pierdere deoarece Pitagora.ro m-a ajutat sa recuperez materia fara probleme";
document.getElementById("reviewnume").textContent = "Bogdan,22";
document.getElementById("reviewnume").style.textAlign = "center";
document.getElementById("reviewtext").style.fontSize = "25px";
document.getElementById("reviewtext").style.marginLeft = "20px";
document.getElementById("student").src = "https://picsum.photos/id/237/200/300";
});
btnprevious.addEventListener("click", () => {
document.getElementById("student").src = "https://picsum.photos/200/300";
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="review1">
<img id="student" src="https://picsum.photos/200/300" />
<div id="review1text">
<h1 id="reviewnume">Alina,21</h1>
<p id="reviewtext">
Sunt studenta la Politehnica in Bucuresti si Pitagora.ro m-a ajutat
foarte mult sa aprofundez cunostiintele mele de algebra.Recomand cu
cea mai mare incredere!
</p>
</div>
<i class="fa-solid fa-circle-arrow-left"></i>
<i class="fa-solid fa-circle-arrow-right"></i>
</div>

Try this code
const image = document.getElementById("student");
image.setAttribute("src","images\review2.png");
If it doesn't work check the path or the type of image is png or not.

change
document.getElementById("student").src = "images\review2.png";
to
document.getElementById("student").setAttribute('src', "images\review2.png");

Error deleting character in summernote only in google chrome

Code Summernote HTML
<div class="col-lg-12 col-md-12 col-xs-12">
<div class="form-group">
<div id="optionContext">
<label for="InputText">{% trans "Crie um contexto da oportunidade" %}</label>
<textarea id="summernote" name="editordata" >
</textarea>
</div>
</div>
</div>
Code Summernote JS
$(document).ready(function () {
$('#summernote').summernote({
callbacks: {
onPaste: function (e) {
var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
e.preventDefault();
document.execCommand('insertText', false, bufferText);
}
}
});
});
I checked that this only happens when I delete text by going up the line in google chrome browser

error in code above summernote, I missed close tags

how to access values in a tag and p tag, here number of "list-group-item-action" will be dynamic

<div class="list-group-item-action" >
Deve
<p>Deve Category.</p>
</div>
<div class="list-group-item-action" >
Deve2
<p>Software development life cycle (SDLC) </p>
</div>
<div class="list-group-item-action" >
dev
<p>Software development life cycle </p>
</div>
New to js and jquery plz help
Requirement:-
Take values from a and p tag in such a way
Deve
Deve Caetgory
Deve2
software development life cycle
----
----
and it should be get downloaded plain/text format.
Here i can make functionality for printing but how can I append all value to one string by taking them from tags

Use loop using div class like below.
$('.list-group-item-action').each(function (index, element) {
var aText = $(this).find('a').text();
var pText = $(this).find('p').text();
console.log(aText);
console.log(pText);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group-item-action" >
Deve
<p>Deve Category.</p>
</div>
<div class="list-group-item-action" >
Deve2
<p>Software development life cycle (SDLC) </p>
</div>
<div class="list-group-item-action" >
dev
<p>Software development life cycle </p>
</div>

Basically the needed loop can be done as follows:
var result = '';
$('.list-group-item-action').each(function() {
result += '\n' + $(this).find('a').html();
result += '\n' + $(this).find('p').html();
});
$('#result').val(result);
You can see the example here: https://jsfiddle.net/8d06f7y4/

how to add a pre made div using javascript on button click

I have a webpage that looks like this
I want it like that every time the save note is pressed a new card with updated title and description appears on the right.
This is the html code I wrote
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 rightLine">
<h1 class="bottomLine">Note List</h1>
<div class="active-cyan-3 active-cyan-4 mb-4">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</div>
<div id ="cards"></div>
</div>
<div class="col-md-8">
<h1 class="bottomLine">Note</h1>
<div class="active-cyan-3 active-cyan-4 mb-4">
<input class="form-control" id="title" type="text" placeholder="Enter title here" aria-label="Search">
</div>
<div class="active-cyan-3 active-cyan-4 mb-4 bottomLine">
<textarea class="form-control" id="description" rows="15" placeholder="Enter descirption here"></textarea>
</div>
<div>
<button type="button" id="removenote" class="btn btn-outline-danger">Remove Note</button>
<button type="button" id="savenote" class="btn btn-outline-success" onclick="x.saveNote()">Save Note</button>
<button type="button" id="addnote" class="btn btn-outline-primary" onclick="x.addNote()">Add Note</button>
</div>
</div>
</div>
</div>
The card is the one with id=card in the code and that is the thing I want new every-time.
This is the javascript I wrote
class Note {
constructor(name, description) {
this.name = name;
this.description = description;
}
}
class NoteComponent {
constructor() {
this.listOfNotes = [];
}
saveNote() {
let title = document.getElementById("title").value;
let description = document.getElementById("description").value;
let currentNote = new Note(title, description);
this.listOfNotes.push(currentNote);
getCardHTML(this.listOfNotes);
this.listOfNotes.forEach((arrayItem) => {
console.log('name is ' + arrayItem.name + ' description is ' + arrayItem.description);
});
}
addNote() {
let title = document.getElementById("title").value = "";
let description = document.getElementById("description").value = "";
}
filterList(noteList, Query) {}
}
/*when the specific note card clicked the title and description places will be populated*/
function showNote(){
console.log('the onclcik worked fine');
}
function getCardHTML(arr) {
let divOfCards = document.getElementById('cards');
while (divOfCards.firstChild) {
divOfCards.removeChild(divOfCards.firstChild);
}
for (let i = 0; i < arr.length; i++) {
let div = document.getElementById("cards");
let anchor = document.createElement("div");
anchor.className = "list-group-item list-group-item-action flex-column align-items-start";
let innerDiv = document.createElement("div");
innerDiv.className = "d-flex w-100 justify-content-between";
let divHeading = document.createElement("h5");
divHeading.className = "mb-1";
divHeading.innerHTML = arr[i].name;
let divPara = document.createElement("p");
divPara.className = "mb-1";
divPara.innerHTML = arr[i].description;
//anchor.href = "#";
anchor.onclick = showNote();
innerDiv.appendChild(divHeading);
anchor.appendChild(innerDiv);
anchor.appendChild(divPara);
div.appendChild(anchor);
}
}
let x = new NoteComponent();
When a new note is saved it appears on the left side. I don't understand how when that card on the left side is clicked that notes title and description occupies the places on the right.

There is a JavaScript function called createElement() that allows you to create and assign a HTML element into a variable.
Once the element is created, just append the content to it and then append the element to a HTML element.
For example:
var body = document.getElementsByTagName('body');
var title = document.getElementById("title").value;
var description = document.getElementById("description").value;
var div = document.createElement("div");
var h1 = document.createElement("h1");
var p = document.createElement("p");
// assign values to elements
h1.textContent = title;
p.textContent = description;
// append elements to div
div.appendChild(h1);
div.appendChild(p);
// append div to body
body.appendChild(div);
You can also use createTextNode instead of textContent.

Traverse the listOfNodes and create card and append it to the div. Whenever you click savenote the card will be appeared. Here is the working demo.
class Note{
constructor(name, description) {
this.name = name;
this.description = description;
}
}
let listOfNotes = [];
class NoteComponent{
constructor(){}
filterList(noteList,Query){}
}
document.getElementById("savenote").addEventListener("click", function(){
let title = document.getElementById("title").value;
let description = document.getElementById("description").value;
let currentNote = new Note(title,description);
listOfNotes.push(currentNote);
var newNode = document.getElementById("card");
listOfNotes.forEach((arrayItem) => {
console.log(arrayItem.name);
var name = document.createElement("h5");
var nameText = document.createTextNode(arrayItem.name);
name.appendChild(nameText);
var description = document.createElement("p");
var desc = document.createTextNode(arrayItem.description);
description.appendChild(desc);
var card_body = document.createElement("div");
card_body.className = "card_body";
card_body.appendChild(name);
card_body.appendChild(description);
var card = document.createElement("div");
card.className = "card";
card.appendChild(card_body);
var aTag = document.createElement("a");
aTag.className="custom-card";
aTag.setAttribute("id", "card");
aTag.appendChild(card);
var cardDiv = document.getElementById("card");
cardDiv.appendChild(aTag);
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 rightLine">
<h1 class="bottomLine">Note List</h1>
<div class="active-cyan-3 active-cyan-4 mb-4">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</div>
<div id="card">
<a href="#" id="card" class="custom-card">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-8">
<h1 class="bottomLine">Note</h1>
<div class="active-cyan-3 active-cyan-4 mb-4">
<input class="form-control" id="title" type="text" placeholder="Enter title here" aria-label="Search">
</div>
<div class="active-cyan-3 active-cyan-4 mb-4 bottomLine">
<textarea class="form-control" id="description" rows="15" placeholder="Enter descirption here"></textarea>
</div>
<div>
<button type="button" id="removenote" class="btn btn-outline-danger">Remove Note</button>
<button type="button" id="savenote" class="btn btn-outline-success">Save Note</button>
<button type="button" id="addnote" class="btn btn-outline-primary">Add Note</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</div>
</body>
</html>

Replace your anchor template (your "a ...id="card" code) with an unordered list like so:
<ul id="cards"></ul>
Then utilize DOM's appendChild() method:
https://www.w3schools.com/jsref/met_node_appendchild.asp
So your JS code will be something like this
document.getElementById("savenote").addEventListener("click", function(){
let title = document.getElementById("title").value;
let description = document.getElementById("description").value;
let currentNote = new Note(title,description);
let listedCard = document.createElement("LI");
listOfNotes.push(currentNote);
listOfNotes.forEach((arrayItem) => {
console.log('name is ' + arrayItem.name + ' description is ' + arrayItem.description);
});
// New code
let listedCard = document.createElement("LI");
let cardAnchor = document.createElement("A");
//...
listedCard.appendChild(cardAnchor);
//...
// The rest of your HTML code for the <a...id="card"> goes here. Little tedious
// Finally append the listedCard to the UL
let cardList = document.getElementById("cards");
cardList.appendChild(listedCard);
});

The simplest solution IMO would be generate the HTML by looping over the Notes array.
1) This function iterates (using map) over the array and returns HTML using a template literal (what's between the back-ticks):
function getCardHTML(arr) {
// Array.map returns a new array
return arr.map(({ name, description }) => {
// In this case the array has a number of elements containing
// HTML strings
return `<h5 class="card-title">${name}</h5><p class="card-text">${description}</p>`;
// which is joined into one HTML string before it's returned
}).join('');
}
2) And you can add it to the card panel like this:
const cards = document.querySelector('.card-body');
cards.innerHTML = getCardHTML(listOfNotes);
DEMO
Edit
In order to solve the next part of the question move all the node selections outside of the functions, and then add an event listener to the cards container.
class Note {
constructor(name, description) {
this.name = name;
this.description = description;
}
}
class NoteComponent {
constructor() {}
filterList(noteList, Query) {}
}
const listOfNotes = [];
const title = document.getElementById('title');
const description = document.getElementById('description');
const save = document.getElementById("savenote");
save.addEventListener("click", saveNote, false);
const cards = document.querySelector('.cards');
cards.addEventListener('click', showNote, false);
function getCardHTML(arr) {
return arr.map(({ name, description }, i) => {
return `<div data-id="${i}" class="card"><h5>${name}</h5><p>${description}</p></div>`;
}).join('');
}
function saveNote() {
let currentNote = new Note(title.value, description.value);
listOfNotes.push(currentNote);
cards.innerHTML = getCardHTML(listOfNotes);
}
function showNote(e) {
const t = e.target;
const id = t.dataset.id || t.parentNode.dataset.id;
title.value = listOfNotes[id].name;
description.value = listOfNotes[id].description;
}
<div class="cards"></div>
<div>
<input id="title" type="text" placeholder="Enter title here" aria-label="Search">
</div>
<div>
<textarea id="description" rows="15" placeholder="Enter descirption here"></textarea>
</div>
<div>
<button type="button" id="removenote">Remove Note</button>
<button type="button" id="savenote">Save Note</button>
<button type="button" id="addnote">Add Note</button>
</div>
Hope that helps.

Error with Bootstrap 3 Collapse

Well i have a page that shows products (entertaiment products) and a list of members of the products (a tango orchestra, or a dancing couple, for example). I want the info of the members to be displayed on accordions for each product. For example, if the "Tango Orchestra" have 3 members i want an accordion with 3 "tabs" to show those members, and the same for the rest of the products... I use AngularJS to generate dynamically the accordions and the id's of those accordions and the tabs associated to those accordions (i can't hardcode those id's because the list of products come from a database and i can't know how much products i will have) and the problem i have is that when i click a title tab it shows the content but hide the titles of all of the tabs, so i can't change tabs to see the others members info. I'll notice that for some reason a in class is beign added to my div with the panel-heading class and i don't know why.
I'll left you the html and js files im using:
productos.html (the part of the problem):
<!-- Contenido -->
<div id="main-content">
<div class="container">
<div class="row row-content" ng-repeat="r in rubros">
<h2 class="col-xs-12 col-lg-3 col-lg-push-5 rubro" id="{{r.rubro | lowercase}}" style="font-weight: 700;">{{r.rubro | uppercase}}</h2>
<div class="col-xs-12 wrapper" ng-repeat="t in tipos | filter: {rubro: r.rubro}">
<div class="row row-content">
<h3 id="{{t.tipo | lowercase}}" class="tipo">{{t.tipo | uppercase}}</h3>
<!-- Tabs -->
<ul class="nav nav-tabs">
<li ng-repeat="prod in productos | filter: {tipo: t.tipo}"><a data-toggle="tab" href="#{{prod.nombre | IdFilter}}">{{prod.nombre}}</a></li>
</ul>
<!-- Tabs Contenido -->
<div class="tab-content">
<div class="tab-pane fade row row-content" id="{{prod.nombre | IdFilter}}" ng-repeat="prod in productos | filter: {tipo: t.tipo}">
<!-- Videos -->
<div class="col-xs-12 col-sm-6 col-sm-push-6">
<h4>VIDEOS:</h4>
<iframe ng-repeat="video in prod.videos" ng-src="{{getIFrameSrc(video.link)}}" ng-show="prod.videos.length > 0" allowfullscreen></iframe>
<p ng-show="prod.videos.length == 0">No hay vídeos de este producto</p>
</div> <!-- Fin Videos -->
<h4 class="col-xs-12 col-sm-6 col-sm-pull-6">INTEGRANTES:</h4>
<!-- Accordion -->
<div id="accordion{{accordionId(prod.nombre)}}" class="panel-group col-xs-12 col-sm-6 col-sm-pull-6" role="tablist" aria-multiselectable="true">
<!-- Items -->
<div ng-repeat="integrante in prod.integrantes" class="panel panel-default">
<!-- Titulo del item -->
<div class="panel-heading" role="tab" id="heading-{{integrante.nombre | IdFilter}}{{accordionId(prod.nombre)}}">
<h3 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion{{accordionId(prod.nombre)}}" href="#{{integrante.nombre | IdFilter}}{{accordionId(prod.nombre)}}" aria-expanded="true" aria-controls="{{integrante.nombre | IdFilter}}">{{integrante.nombre}} {{integrante.apellido}}</a>
</h3>
</div> <!-- Fin Titulo -->
<!-- Contenido del item -->
<div id="{{integrante.nombre | IdFilter}}{{accordionId(prod.nombre)}}" class="panel-collapse collapse" aria-labelledby="heading-{{integrante.nombre | IdFilter}}{{accordionId(prod.nombre)}}" role="tabpanel">
<div class="panel-body">
<p>{{integrante.resenia}}</p>
</div>
</div> <!-- Fin Contenido -->
</div> <!-- Fin Item -->
</div> <!-- Fin Accordion -->
<p class="col-xs-12 col-sm-6" ng-class="{'col-sm-pull-6': prod.videos.length > 0}" style="padding-top: 10px;">{{prod.resenia}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
ProductosController.js:
(function(){
var module = angular.module("tangoInfinito");
var ProductosController = function($scope, $sce, ProductosService) {
$scope.getIFrameSrc = function(link) {
return $sce.trustAsResourceUrl(link + "?controls=2");
};
function idAsignado(lista, producto) {
var listaLength = lista.length;
for (var i = 0; i < listaLength; i++) {
if (lista[i].producto === producto) {
return true;
}
}
return false;
};
var listaIdAccordions = [];
var accordionNumber = 0;
$scope.accordionId = function(prodNombre) {
if(!idAsignado(listaIdAccordions, prodNombre)) {
accordionNumber++;
listaIdAccordions.push({
producto: prodNombre,
id: ("accordion" + accordionNumber)
});
return accordionNumber;
}
else {
var largo = listaIdAccordions.length;
for(var i = 0; i < largo; i++) {
if(listaIdAccordions[i].producto === prodNombre) {
var temp = listaIdAccordions[i].id;
var id = temp.slice(temp.length - 1, temp.length);
return id;
}
}
}
};
var armarLista = function($rubros, $tipos) {
var lista = [];
var rubrosTemp = $rubros.slice(0);
var tiposTemp = $tipos.slice(0);
for(var i = 0; i < rubrosTemp.length; i++) {
var rubro = rubrosTemp[i].rubro.toUpperCase();
lista.push( {descripcion: rubro, isHeader: true} );
for(var j = 0; j < tiposTemp.length; j++) {
if(tiposTemp[j].rubro === rubrosTemp[i].rubro) {
lista.push( {descripcion: tiposTemp[j].tipo, isHeader: false} );
}
}
}
return lista;
};
var getDatosFromService = function() {
ProductosService.getDatos().success(function(response) {
$scope.navbarList = armarLista(response["rubros"], response["tipos"]);
$scope.productos = response["productos"];
$scope.rubros = response["rubros"];
$scope.tipos = response["tipos"];
});
}
getDatosFromService();
};
module.controller("ProductosController", ProductosController);
})();
IdFilter.js:
(function() {
var module = angular.module("tangoInfinito");
var IdFilter = function() {
return function(item) {
var id = "";
id = item.toLowerCase();
id = id.replace(/\s/g, "-");
return id;
};
};
module.filter("IdFilter", IdFilter);
})();
And the behavior i was talking about:
initial state
when i click on tabs titles
I would be very thankfull for any help that help me to debug or fix this error.
Thanks in advance.

Well i have found the answer... the incorrect behavior is because i have a script in the end of the page that add active in classes to the first div of the tabs section to get the first tab show but also add those classes to the div with the panel-heading class, and because of that the collapse script won't work fine... the solution i just found it just remove the class with the removeClass method from jQuery. Here is the code of the script:
<script>
$(document).ready(function() {
//Tomo el nodo al que luego le agrego li según correspondan
//<li class="dropdown-header">Rubro</li> Para los rubros
//<li>Tipo</li>
var lista = $("ul.dropdown-menu");
var navbarProductosLista = undefined;
//Chequea hasta que la variable navbarList de ProductosController esta asignada
function checkVariable() {
//Toma la variable navbarList del scope de ProductosController
//para agregar la lista de manera dinámica
navbarProductosLista = angular.element($("[ng-controller=ProductosController]")).scope().navbarList;
if(navbarProductosLista != undefined) {
for(var i = 0; i < navbarProductosLista.length; i++) {
if(navbarProductosLista[i].isHeader === true) {
var nodo = $("<li><a href='productos.html#" + navbarProductosLista[i].descripcion.toLowerCase() + "'>" + navbarProductosLista[i].descripcion + "</a></li>");
nodo.children().addClass("dropdown-header");
lista.append(nodo);
}
else {
var nodo = $("<li><a href='productos.html#" + navbarProductosLista[i].descripcion.toLowerCase() + "'>" + navbarProductosLista[i].descripcion + "</a></li>");
lista.append(nodo);
}
}
clearInterval(id);
}
$("ul li:first-child")
.addClass("active");
//This is the line that causes the problem
$(".tab-content div:first-child")
.addClass("in active");
//And this the line that fix it
$(".panel-heading")
.removeClass("in active");
};
var id = setInterval(checkVariable, 250);
});
</script>