How to use JavaScript with html to display values on the screen?

Question

Been trying to learn html and I'm finally tackling JavaScript. I've somewhat started but I'm lost on what to do. What I want to do is be able to update my site after the user has pressed a checkerbox and also be able to remove said value if the user unchecks the box.

To make it easier to understand I've got a pic of the site:

And what I want it to do is this. Basically, you click a box and the name of the music and it's price get put into the right side of the site and opposite when you uncheck:

Here's the code that is related to the question:

function changeContent(boxElement, divToChange, innerDiv) {
    var i = boxElement.value.indexOf("|");

    var cleaned = boxElement.value.indexOf(0, i);

    var price = boxElement.value.substring(0, i);

    s = document.getElementById(divToChange).innerHTML;
    s += "<div class =" + innerDiv + ">" + cleaned + "</div>";
    document.getElementById(divToChange).innerHTML = s;
}

<div class="chosenSongs">
                <label>Du har följande skivor:</label>
                <p class = "selectedSongs">Här kommer valda låtar synas</p>
                <div class="oneSong" value = "Polisen"></div>
                <div class="oneSong" value = "Valhalla"></div>
                <div class="oneSong" value = "Raggare på stureplan"></div>
                <div class="oneSong" value = "Monster"></div>
                <div class="oneSong" value = "Instruktionsboken"></div>
                <div class="oneSong" value = "Komplicerad"></div>
                <div class="oneSong" value = "Starkare"></div>
                <div class="oneSong" value = "wake Me Up"></div>
                <div class="oneSong" value = "Hey Brother"></div>
                <div class="oneSong" value = "You Make Me"></div>
                <div class="oneSong" value = "Levels"></div>
            </div>

            <div class="price">
                <label>Pris:</label>
            </div>
            
            <fieldset class="checkbox">
                <div class="title">Ringnes-Ronny</div>
                <div class="boxContainer">
                    <label><input type="checkbox" value = "Ringnes-Ronny: Polisen|59"
                        onclick = "changeContent(this, 'chosenSongs', 'oneSong')">Polisen<span class="time">59 SEK</span></label>
                    <label><input type="checkbox">Valhalla<span class="time">39 SEK</span></label>
                    <label><input type="checkbox">Raggare på stureplan<span class="time">49 SEK</span></label>
                    <label><input type="checkbox">Monster<span class="time">39 SEK</span></label>
                </div>
                <div class="title">Miss Li</div>
                <div class="boxContainer">
                    <label><input type="checkbox">Instruktionsboken<span class="time">39 SEK</span></label>
                    <label><input type="checkbox">Komplicerad<span class="time">49 SEK</span></label>
                    <label><input type="checkbox">Starkare<span class="time">(kan ej beställas)</span></label>
                </div>

                <div class="title">Avicii</div>
                <div class="boxContainer">
                    <label><input type="checkbox">Wake Me Up<span class="time">59 SEK</span></label>
                    <label><input type="checkbox">Hey Brother<span class="time">49 SEK</span></label>
                    <label><input type="checkbox">Waiting For Love<span class="time">(kan ej beställas)</span></label>
                    <label><input type="checkbox">You Make Me<span class="time">29 SEK</span></label>
                    <label><input type="checkbox">Levels<span class="time">49 SEK</span></label>
                </div>

                <div>Välj media:</div>
                <div class="boxContainer">
                    <input type="radio" name = "media"> Spotify
                    <input type="radio" name = "media"> YouTube
                    <input type="radio" name = "media"> Apple Music

                </div>
            </fieldset>

Webdeveloper_Jelle · Accepted Answer · 2022-10-04 12:34:23Z

Hope this helps you.
Just add the function to all your checkboxes.
I added the function to the first 4 checkboxes so that you can see it working.
You should create a global variable called price that updates when the function is called.

The price gets updated with the price inside the value everytime a checkbox is clicked.

var price = 0;
function changeContent(boxElement, divToChange, innerDiv) {
    var split     = boxElement.value.split("|");
    var name      = split[0];
    var plusPrice = parseInt(split[1]);
    if(boxElement.checked){
      price = price + plusPrice;
    }
    else{
      price = price - plusPrice;
    }
    
    document.getElementById("price").innerHTML = price;
    // do something else you need to do
}

.boxContainer label{
  display: table-row;
}

<div class="chosenSongs">
    <label>Du har följande skivor:</label>
    <p class = "selectedSongs">Här kommer valda låtar synas</p>
    <div class="oneSong" value = "Polisen"></div>
    <div class="oneSong" value = "Valhalla"></div>
    <div class="oneSong" value = "Raggare på stureplan"></div>
    <div class="oneSong" value = "Monster"></div>
    <div class="oneSong" value = "Instruktionsboken"></div>
    <div class="oneSong" value = "Komplicerad"></div>
    <div class="oneSong" value = "Starkare"></div>
    <div class="oneSong" value = "wake Me Up"></div>
    <div class="oneSong" value = "Hey Brother"></div>
    <div class="oneSong" value = "You Make Me"></div>
    <div class="oneSong" value = "Levels"></div>
</div>

<div class="price">
    <label>Pris:</label>
</div>

<fieldset class="checkbox">
    <div class="title">Ringnes-Ronny</div>
    <div class="boxContainer">
        <label><input type="checkbox" value = "Ringnes-Ronny: Polisen|59"
            onclick = "changeContent(this, 'chosenSongs', 'oneSong')">Polisen<span class="time">59 SEK</span></label>
        <label><input type="checkbox" value = "Ringnes-Ronny: Valhalla|39"
            onclick = "changeContent(this, 'chosenSongs', 'oneSong')">Valhalla<span class="time">39 SEK</span></label>
        <label><input type="checkbox" value = "Ringnes-Ronny: Raggare på stureplan|49"
            onclick = "changeContent(this, 'chosenSongs', 'oneSong')">Raggare på stureplan<span class="time">49 SEK</span></label>
        <label><input type="checkbox"  value = "Ringnes-Ronny: Monster|39"
            onclick = "changeContent(this, 'chosenSongs', 'oneSong')">Monster<span class="time">39 SEK</span></label>
    </div>
    <div class="title">Miss Li</div>
    <div class="boxContainer">
        <label><input type="checkbox">Instruktionsboken<span class="time">39 SEK</span></label>
        <label><input type="checkbox">Komplicerad<span class="time">49 SEK</span></label>
        <label><input type="checkbox">Starkare<span class="time">(kan ej beställas)</span></label>
    </div>

    <div class="title">Avicii</div>
    <div class="boxContainer">
        <label><input type="checkbox">Wake Me Up<span class="time">59 SEK</span></label>
        <label><input type="checkbox">Hey Brother<span class="time">49 SEK</span></label>
        <label><input type="checkbox">Waiting For Love<span class="time">(kan ej beställas)</span></label>
        <label><input type="checkbox">You Make Me<span class="time">29 SEK</span></label>
        <label><input type="checkbox">Levels<span class="time">49 SEK</span></label>
    </div>

    <div>Välj media:</div>
    <div class="boxContainer">
        <input type="radio" name = "media"> Spotify
        <input type="radio" name = "media"> YouTube
        <input type="radio" name = "media"> Apple Music

    </div>
</fieldset>

<fieldset>
Price: <p><c id="price">0</c> SEK</p> 
</fieldset>

Thanks for the help, it works. I've got a another question. How would you be able to make the artist and music also appear and disappear? Is it the same logic as the price?
Well you should make a list where you append the values of the music to when selecting or remove an item when deselecting. Check stackoverflow.com/questions/37155230/…
Mainly the same logic, but you need another method to make the music appear or dissapear.

Collectives™ on Stack Overflow

How to use JavaScript with html to display values on the screen?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related