Call JS variable in HTML specific div file based on if and else condition-CodePudding

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 hljs-string">">"۔${specialprice}",-</p>
            <p hljs-string">"><span hljs-string">">"۔${price}",-</span></p>"
         }
         else
         {
            var data = "<p hljs-string">"><span hljs-string">">".${price}",-</span></p>"
    }
}

Call this function in HTML:

 <div class="priceplace">
              <script>hasspecialprice();</script>
</div>

CodePudding user response：

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 hljs-string">">"۔${specialprice}",-</p>
            <p hljs-string">"><span hljs-string">">"۔${price}",-</span></p>"
         }
         else
         {
            var data = "<p hljs-string">"><span hljs-string">">".${price}",-</span></p>"
    }
}

CodePudding user response：

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 >${specialprice},-</p>
        <p ><span >${price},-</span></p>`
        : `<p ><span >${price},-</span></p>`
}

<form>
    Specialprice:
    <input name="specialprice">
    Price:
    <input name="price">
</form>

<div class="priceplace" style="border: 1px solid black; height: 16px"></div>

CodePudding user response：

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);   
    }
}