I have 2 variables contain data i need to call in HTML based on js logic, can you check and fix code for me what i am missing.
${specialprice} and ${price}
I need javascript condition to be define in javascript file and call it in html. ( JS file already connected to html )
What i need is to complete this logic is if ${specialprice} contain any value then show it together with ${price}
if is empty then show only ${price}.
condition in JS File:
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>"
}
}
Call this function in HTML:
<div class="priceplace">
<script>hasspecialprice();</script>
</div>
Here's an example of how you could change the content of a div dynamically using js. The important thing to note (besides the corrected syntax) is that I selected the output-target in js and then updated it's content based on the relevant values.
// 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>In Javascript code you dont need to use the ${} statement. The ${} only uses when you need to concatenate string with variables. You only need to remove this from your if statement. You could improve to use
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>"
}
}
If have an way to call the hasspecialprice() function then you must try this.
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);
}
}