Tengo 2 variables que contienen datos que necesito para llamar en HTML según la lógica js, ¿puede verificar y corregir el código para mí lo que me falta?
${specialprice} and ${price}Necesito que la condición de javascript se defina en el archivo javascript y lo llame en html. (Archivo JS ya conectado a html)
Lo que necesito es completar esta lógica si ${specialprice} contiene algún valor y luego mostrarlo junto con ${price}
si está vacío, muestra solo ${price}.
condición en el archivo JS:
hasspecialprice() { if(${specialprice} != ''){ var data = "<p class="specialprice">"۔${specialprice}",-</p> <p class="price"><span class="visibleprice">"۔${price}",-</span></p>" } else { var data = "<p class="price"><span class="visibleprice">".${price}",-</span></p>" } }Llame a esta función en HTML:
<div class="priceplace"> <script>hasspecialprice();</script> </div>Aquí hay un ejemplo de cómo podría cambiar el contenido de un div dinámicamente usando js. Lo importante a tener en cuenta (además de la sintaxis corregida) es que seleccioné el objetivo de salida en js y luego actualicé su contenido en función de los valores relevantes.
// select the form used for the demo const form = document.querySelector('form'); // select the output div const target = document.querySelector('.priceplace'); // define our example data const data = { price: 0, specialprice: 0 }; // when a formfield is changed, we change our example data and update the output form.onchange = ({ target: { value, name } }) => { data[name] = value; hasspecialprice(data.price, data.specialprice); }; function hasspecialprice(price, specialprice) { // using a ternary expression is equivalent to a simple if/else // we change the output's html based on the condition target.innerHTML = specialprice !== '' ? `<p class="specialprice">${specialprice},-</p> <p class="price"><span class="visibleprice">${price},-</span></p>` : `<p class="price"><span class="visibleprice">${price},-</span></p>` } <form> Specialprice: <input name="specialprice"> Price: <input name="price"> </form> <div class="priceplace" style="border: 1px solid black; height: 16px"></div>En el código Javascript, no necesita usar la instrucción ${} . El ${} solo se usa cuando necesita concatenar cadenas con variables. Solo necesita eliminar esto de su declaración if. Podrías mejorar para usar
hasspecialprice() { if(specialprice != ''){ var data = "<p class="specialprice">"۔${specialprice}",-</p> <p class="price"><span class="visibleprice">"۔${price}",-</span></p>" } else { var data = "<p class="price"><span class="visibleprice">".${price}",-</span></p>" } }Si tiene una forma de llamar a la función hasspecialprice(), entonces debe probar esto.
hasspecialprice() { const inputDiv = document.getElementsByClassName("priceplace"); if(${specialprice} != ''){ var pElement = document.createElement('p'); // CREATING AN ELEMENT pElement.className += "specialprice"; // ADDING CLASSE TO IT pElement.innerText = specialprice; // ADDING DATA TO IT var secondPElement = document.createElement('p'); secondPElement.className += "price"; var spanElement = document.createElement('span'); spanElement.className += "visibleprice"; spanElement.innerText = price; inputDiv.append(pElement); secondPElement.appendChild(spanElement); inputDiv.append(secondPElement); } else{ var secondPElement = document.createElement('p'); secondPElement.className += "price"; var spanElement = document.createElement('span'); spanElement.className += "visibleprice"; spanElement.innerText = price; secondPElement.appendChild(spanElement); inputDiv.append(secondPElement); } }