Develop Reference

JS redirect function

I am trying to create a function that changes the redirect link of a button if the url contains the word "TicketPreDateable".
So I have a button like this one:
<div class="col-12 col-md-6 col-xl-4" id="myproductid">
<figure class="effect-product mx-auto"><img class="figure-img img-fluid" src="myimage">
<figcaption><span class="badge badge-danger" style="top: -2.7em; background-color: red;">OFFRE SPÉCIALE</span>
<h2 class="mt-0" style="color: white !important;"><span>My </span>Product Title</h2>
<p>Profitez des pistes le samedi lorsque d'autres sont occupés à faire leurs valises ou coincés dans les bouchons. Un tarif unique à 24€ vous donne accès en toute liberté au domaine skiable pour la journée.</p>
<a onclick="produrlmobile("https://www.mylink.com/fr/ProductsNgTicket/ticketPreDateable?poolNr=13&projNr=495&ticketTypeNr=122&preDatable=True&groupId=1&Day=11&Month=12&Year=2021")" href=""></a>
</figcaption>
</figure>
</div>
And my function look like this :
function produrlmobile(produrl) {
if (produrl.includes("TicketPreDateable")) {
if (window.innerWidth < 960) {
window.location.href = produrl.replace(
"TicketPreDateable",
"TicketPreDateableMobile"
);
} else {
window.location.href = produrl;
}
} else {
window.location.href = produrl;
}
}
I have the impression that it is because of special characters in the url that the function does not work, but I do not know how to avoid that.
Thank you for your help and have a nice day !

See Sarens comment for issues with the HTML.
Also, note that the replace method is case sensitive. In your function it looks like you are trying to replace the string TicketPreDateable, but the url only contains ticketPreDateable.
I would recommend checking you are handling cases correctly, for both the old and new strings in the replace method arguments.

Creating a product table and counter with javascript

I'm looking to create a product table that lets the user add products to a counter, or cart if you like. I think I've got most of the coding concepts but I can't seem to get it to work.
Some of the code snippet seem to work on their own but as soon as I put them together I get no results at all.
Here is the Javascript:
// Products with descriptions
const products = [
{
"name": "Aloe Vera",
"origin": "Nederländerna",
"description": "Lättskött suckulent med tjocka gröna blad. En av världens äldsta läkeväxkter. Trivs på soliga platser. Låt den torka ut mellan varje vattning",
"care": "Lättskött suckulent som trivs ljust, men undvik direkt solljus. Vattna undertill och inte på växten, men låt jorden torka mellan varje vattning. Ge flytande näring från vår till höst. Eventuell omplantering ska göras på våren.",
"price": 799,
"image": "images/Aloevera.png"
},
{
"name": "Citronfikus",
"origin": "Danmark",
"description": "En vacker växt med blanka, små gröna blad. Lättskött alternativ till en bonsai. Trivs i ljust till halvskuggigt läge. Vattnas då jorden nästan torkat upp, ungefär en gång i veckan.",
"care": "Passar bra i uterummet sommartid, vänt mot öst eller väst. Behöver extra ljus vintertid. Tål måttlig uttorkning, men att vattna den regelbundet är rekommendationen för att den ska bli så fin som möjligt.",
"price": 299,
"image": "images/Citronfikus.png"
},
{
"name": "Benjaminfikus",
"origin": "Asien och Australien",
"description": "En vacker växt med blanka, gröna blad, här med elegant flätad stam. Trivs ljust, men undvik direkt solljus. Låt den torka lätt mellan vattningarna. Gillar att bli duschad på bladen.",
"care": "Vill stå så ljust men undvik direkt sol och drag. Flytta helst inte växten under vinterhalvåret då den kan tappa sina blad. Vattna 1 gång i veckan. Håll jorden fuktig. Under vinterhalvåret behöver den inte samma mängd vatten. Ge den näring 1 gång i veckan under våren och sommaren. Under höst och vinter 1 gång i månaden. ",
"price": 599,
"image": "images/Benjaminfikus.png"
}
];
// The protocol array pointing the key that is the products
let protocol = {};
// Starting of the amount at 0
function initProtocol() {
for (let product of products) {
protocol[product.name] = 0;
}
}
// The body of the protocol
function renderProtocol() {
let tbody = document.querySelector("#protocol > tbody");
tbody.innerHTML = "";
for (let product of products) {
let row = tbody.insertRow(-1);
let cellName = row.insertCell(-1);
let cellAmount = row.insertCell(-1);
let cellScore = row.insertCell(-1);
let amount = protocol[product.name];
cellName.textContent = product.name;
cellAmount.textContent = amount;
cellScore.textContent = amount * product.score;
}
}
// Uping the product amount in the protocol
function increment(name) {
console.log("Name: " + name);
protocol[name]++;
renderProtocol();
}
// Rendering the design of the product table
function renderProducts() {
const template = `
<img>
<div class="p-2">
<div>
<span class="name"></span>
<span class="plus float-right" title="Lägg till produkt">
<i class="fa fa-plus-square" aria-hidden="true"></i>
</span>
</div>
<div class="origin"></div>
<div class="description"></div>
<div class="care"></div>
<div class="price"></div>
</div>
`;
const container = document.querySelector("#products");
for (let product of products) {
let item = document.createElement("div");
item.classList.add("item", "ml-2");
item.innerHTML = template;
item.querySelector("img").src = product.image;
item.querySelector(".name").textContent = product.name;
item.querySelector(".origin").textContent = product.origin;
item.querySelector(".care").textContent = product.care;
item.querySelector(".price").textContent = product.price;
item.querySelector(".description").textContent = product.description;
item.querySelector(".plus").addEventListener("click", () => increment(product.name));
container.appendChild(item);
}
}
window.onload = function() {
renderProducts();
initProtocol();
renderProtocol();
}
And here is the HTML:
<body> <h1 class="headline">Produkter</h1>
<div class="container col-12">
<div class="row">
<div class="col-8 d-flex flex-wrap" id="products"></div>
<div class="col-4">
<table class="table" id="protocol">
<thead>
<tr>
<th>Produkt</th>
<th>Antal</th>
<th>Pris</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</body>

You're trying to invoke renderBirds method but its not defined yet.
Tip: Whenever you code and something doesn't seems to work appropriately try checking console errors. They might help you a lot!

Bootstrap 4 - JavaScript cus

I'm trying to change the default text of the of custom-file-input to show it in Spanish.
<div class="card">
<div class="card-header">
<h2>12. Carga de ficheros customizado</h2>
</div>
<div class="card-block">
<form>
<div class="form-group">
<label class="custom-file">
<input type="file" id="fileCustom" class="custom-file-input">
<span class="custom-file-control"></span>
</label>
<small id="fileCustom" class="form-text text-muted">Para hacerlo personal
hay que envolver en una etiqueta el elemento input.
</small>
</div>
</form>
</div>
</div>
The JavaScript that I'm using is the suggested in Translating or customizing the strings (bottom of the page)
$fileCustom: (
placeholder: (
en: "Choose file...",
es: "Seleccionar archivo..."
),
button-label: (
en: "Browse",
es: "Navegar"
)
);
I've already changed the language of my document <html lang="es"> and probably the mistake is in the relation between the javascript and the HTML code but I couldn't find a solution within the internet.

I suggest you to use image that you wanted to view "Seleccionar archivo..." and es: "Navegar"
You can use below line of codes:
var W3CDOM = (document.createElement && document.getElementsByTagName);
function initFileUploads() {
if (!W3CDOM) return;
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
fakeFileUpload.appendChild(document.createElement('input'));
var image = document.createElement('img');
image.src='pix/button_select.gif';
fakeFileUpload.appendChild(image);
var x = document.getElementsByTagName('input');
for (var i=0;i<x.length;i++) {
if (x[i].type != 'file') continue;
if (x[i].parentNode.className != 'fileinputs') continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
}
N:B: You should change the image url from above codes.

how to retrieve a value by clicking and retrieve the id?

I want to make a function that allows me by clicking on the square with the id of colors, in return me id = " retours_couleurs " the sentence containing the colors contained in the table in php files, sorry for my english i'm french
this is my html code
<fieldset class="appel">
<code>
Un clic simple sur le carré bleu appelle le contenu du fichier couleurs.php, en transmettant en paramètre l'ID de ce carré. La réponse du fichier appelé devra s'afficher dans l'espace prévu à cet effet (id="retour_couleurs").
</code>
</fieldset>
<br />
<fieldset class="appel">
<div class="carre-couleurs">
<div class="carre" id="jaune"></div>
<div class="carre" id="rouge"></div>
<div class="carre" id="bleu"></div>
<div class="carre" id="vert"></div>
<div class="clear"></div>
</div>
<br />
<br />
<fieldset class="retour">
<legend>Contenu du fichier</legend>
<div id="retour_couleurs"></div>
</fieldset>
</fieldset>
this is my ajax function
function appel_contenue_couleur(){
var cM = new XMLHttpRequest();
cM.open("POST","fichiers/couleurs.php",true);
cM.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var couleur = this.id;
var retour_couleurs = document.getElementById('retour_couleurs');
cM.send("retour= "+couleur);
cM.onreadystatechange = function (){
if (cM.readyState == 4 && cM.status == 200)
{
retour_couleurs.innerHTML=cM.responseText;
}
}}
and this is my php code
$_couleurs = array("jaune", "rouge", "bleu", "vert");
$_citations = array(
"L’herbe est toujours plus verte ailleurs",
"La terre est bleue comme une orange",
"Le ciel est un oeuf, la terre en est le jaune",
"Mieux vaut rester rouge cinq minutes que jaune toute la vie",
"C'était un moustique snob. Il ne buvait que du sang bleu"
);
$couleurs = $_POST['retour'];
if (in_array($couleurs,$_couleurs)){
for ($i=0;$i<count($_citations);$i++){
if (in_array ($couleurs,$_citations[$i])){
echo $_citations[$i];
}
}
}

If I understood your problem correctly, you're not getting any output from the AJAX request. That's probably because you're using the wrong PHP function to check if a sentence contains a certain word.
Try with this one:
if (stripos($_citations[$i], $couleurs) !== false) {
echo $_citations[$i];
}
I used stripos because you probably don't want to make a case sensitive check.

Complete code:
Javascript:
function appel_contenue_couleur(obj){
var cM = new XMLHttpRequest();
cM.open("POST","colors.php",true);
cM.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var couleur = obj.id;
var retour_couleurs = document.getElementById('retour_couleurs');
cM.send("retour= "+couleur);
cM.onreadystatechange = function (){
if (cM.readyState == 4 && cM.status == 200)
{
retour_couleurs.innerHTML=cM.responseText;
}
}}
HTML:
<div class="carre-couleurs">
<div class="carre" id="jaune" onclick="appel_contenue_couleur(this);">1111111</div>
<div class="carre" id="rouge" onclick="appel_contenue_couleur(this);">222222222</div>
<div class="carre" id="bleu" onclick="appel_contenue_couleur(this);">33333333</div>
<div class="carre" id="vert" onclick="appel_contenue_couleur(this);">444444444444</div>
<div class="clear"></div>
</div>
PHP:
$colors = array("jaune", "rouge", "bleu", "vert");
$citations = array(
"L’herbe est toujours plus verte ailleurs",
"La terre est bleue comme une orange",
"Le ciel est un oeuf, la terre en est le jaune",
"Mieux vaut rester rouge cinq minutes que jaune toute la vie",
"C'était un moustique snob. Il ne buvait que du sang bleu"
);
$color = trim($_POST['retour']);
//echo $color;
if (in_array($color,$colors)){
for($i=0;$i<count($citations);$i++) {
if(stripos($citations[$i],$color)!==false) {
echo $citations[$i].'<br>';
}
}
}
It is working, 100%, it's tested. Just change links, if needed.

use id attribute as reference or variable for tooltip

I am currently using this code .
However the text I wish to display must be in one line, and if there is a apostrophe ( ' ) in the text, it will not work anymore .
imgover(this, 'Text to display')
Is there a way to remplace the second variable of onmouseover by an id of a div so that it will display everything in the div please ?
Here is an example of the div :
<div id ="text1" >
<em><img class="floatLeft" src="images/F9979.jpg" alt="" />
TITRE DU FILM : Man of Steel
<br />
<br />
RESUME :
Film fantastique américain réalisé par Zack Snyder avec Henry Cavill, Amy Adams, Diane Lane
<br />
<br />
DUREE : 2H23
<br />
Un petit garçon découvre qu'il possède des pouvoirs surnaturels et qu'il n'est pas né sur la Terre. Plus tard, il s'engage dans un périple afin de comprendre d'où il vient et pourquoi il a été envoyé sur notre planète. Mais il devra devenir un héros s'il veut sauver le monde de la destruction totale et incarner l'espoir pour toute l'humanité...
</em>
</div>
I would like to remplace 'Text to display' from
imgover(this, 'Text to display')
by what's in the div (text1) so that at the place where there is the div ( tooltip) I will see the text and the image from the div ( text1).

I'm not really sure whether I understood your question properly but this should work. You need to put the value of the id tag of your html element in the parameter of getElementById
<script>
function imgover(img, tip) {
document.getElementById('text1').style.display = 'block';
document.getElementById('text1').innerHTML = tip;
document.getElementById('text1').style.left = img.offsetLeft + 'px';
}
function imgout() {
document.getElementById('text1').style.display = 'none';
}
</script>