Javascript masters jan, pa tulong po

DarkResurrection · Oct 2, 2021

Good day po! Baka alam niyo po kung paano i-show yung prutas base sa quantity na ilalagay? Say for example i-select ko yung apple then maglalagay ako ng quantity, then magpapakita yung picture ng apple, and kapag i increase po yung value, dumadami po yung picture nung apple same as kapag idecrease ko, mababwasan din.

Ito po yung code ko po, di ko po kasi makuha yung logic po, hehe. Salamat po sa tutulong !!

JavaScript:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
    <header class="container p-3 alert-danger">
        <h3>Fruit Booth</h3>
        <p>Shows fruits depending on quantity</p>
    </header>
    <section class="container my-3">
        <h4>Welcome to Fruit Booth</h4>
        <hr>
        <div class="form-group" style="width: 100%;">
            <label for="fruit">Fruit</label>
            <select id="select" class="form-select">
                <option>Select Fruit</option>
            </select>
            <br>
            <label for="quan">Quantity</label>
            <input type="number" id="quantity" placeholder="" class="form-control" onclick="">
            
            <br><label for="code">Result:</label>
            <h3 id="code"></h3>
                    
        </div>
    </section>

    <script type="text/javascript">
            var select = document.getElementById("select"),
            arr = [];
            arr[0] = 'Apple';
            arr[1] = 'Banana';

            for(var i = 0; i<arr.length;i++){
                var option = document.createElement("option"),
                txt=document.createTextNode(arr[i]);

            option.appendChild(txt);
            option.setAttribute("value",arr[i]);
            select.insertBefore(option,select.lastChild);
            }

            
        function quan(){

            var a = document.getElementById("select")
        }
    </script>
</body>
</html>

PHC_Jayvee · Oct 2, 2021

Gawa ka Listener

Onchange ng fruits and value call mo yung update picture

Ayun lang yun

PHC_Jayvee · Oct 2, 2021

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
    </head>
    <body>
        <select id="selector">
            <option value="apple">Apple</option>
            <option value="banana">Banana</option>
        </select>

        <br />
        quantity
        <input type="text" id="quantity" />
        <br />
        <ul id="output"></ul>
        <script>
            const selector = document.getElementById("selector");
            const input = document.getElementById("quantity");
            const output = document.getElementById("output");

            selector.addEventListener("change", update);
            input.addEventListener("change", update);

            function update() {
                output.innerHTML = ""; //reset the output
                for (let i = 0; i < input.value; i++) {
                    let li = document.createElement("li");
                    li.appendChild(document.createTextNode(selector.value));
                    output.appendChild(li);
                }
            }
        </script>
    </body>
</html>

DarkResurrection · Oct 2, 2021

PHC_Jayvee said:
Gawa ka Listener

Onchange ng fruits and value call mo yung update picture

Ayun lang yun

sige po paps try ko po, salamat

dev-ace · Oct 2, 2021

eto ba

DarkResurrection · Oct 2, 2021

dev-ace said:
eto ba View attachment 1647980

ganyan nga po paps hehe

dev-ace · Oct 2, 2021

DarkResurrection said:
ganyan nga po paps hehe

Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
            integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
            crossorigin="anonymous"
        />
    </head>
    <body>
        <div class="container">
            <div class="row justify-content-center py-5">
                <form class="border col-md-8">
                    <div class="form-row align-items-center">
                        <div class="col-md-8 my-1">
                            <div class="form-group p-3">
                                <label>Select Fruit 🍎</label>
                                <select
                                    class="form-control"
                                    id="fruit"
                                    onchange="selectFruit(this)"
                                >
                                    <option></option>
                                    <option value="0">Apple 🍎</option>
                                    <option value="1">Banana 🍌</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 mt-3">
                            <div class="btn-group">
                                <button
                                    type="button"
                                    class="btn btn-success"
                                    onclick="increment()"
                                >
                                    Increment
                                </button>
                                <button
                                    type="button"
                                    class="btn btn-danger"
                                    onclick="decrement()"
                                >
                                    Decrement
                                </button>
                            </div>
                        </div>
                        <br />
                        <p>
                            Output:
                            <span id="output"> </span>
                        </p>
                    </div>
                </form>
            </div>
        </div>
        <script
            src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
            crossorigin="anonymous"
        ></script>

        <script>
            let selected_fruit;
            let output = document.querySelector("#output");

            function selectFruit(fruit) {
                if (fruit.value) {
                    selected_fruit = identiFyFruit(fruit);

                    output.innerHTML = selected_fruit;
                } else {
                    output.innerHTML = ``;
                }
            }

            const increment = () => {
                selected_fruit = identiFyFruit(fruit);
                output.innerHTML += selected_fruit;
            };

            const decrement = () => {
                output.innerHTML = output.textContent.slice(1);
            };

            function identiFyFruit(fruit) {
                return fruit.value == 0 ? "🍎" : "🍌";
            }
        </script>
    </body>
</html>

DarkResurrection · Oct 2, 2021

dev-ace said:

Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
            integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
            crossorigin="anonymous"
        />
    </head>
    <body>
        <div class="container">
            <div class="row justify-content-center py-5">
                <form class="border col-md-8">
                    <div class="form-row align-items-center">
                        <div class="col-md-8 my-1">
                            <div class="form-group p-3">
                                <label>Select Fruit 🍎</label>
                                <select
                                    class="form-control"
                                    id="fruit"
                                    onchange="selectFruit(this)"
                                >
                                    <option></option>
                                    <option value="0">Apple 🍎</option>
                                    <option value="1">Banana 🍌</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 mt-3">
                            <div class="btn-group">
                                <button
                                    type="button"
                                    class="btn btn-success"
                                    onclick="increment()"
                                >
                                    Increment
                                </button>
                                <button
                                    type="button"
                                    class="btn btn-danger"
                                    onclick="decrement()"
                                >
                                    Decrement
                                </button>
                            </div>
                        </div>
                        <br />
                        <p>
                            Output:
                            <span id="output"> </span>
                        </p>
                    </div>
                </form>
            </div>
        </div>
        <script
            src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
            crossorigin="anonymous"
        ></script>

        <script>
            let selected_fruit;
            let output = document.querySelector("#output");

            function selectFruit(fruit) {
                if (fruit.value) {
                    selected_fruit = identiFyFruit(fruit);

                    output.innerHTML = selected_fruit;
                } else {
                    output.innerHTML = ``;
                }
            }

            const increment = () => {
                selected_fruit = identiFyFruit(fruit);
                output.innerHTML += selected_fruit;
            };

            const decrement = () => {
                output.innerHTML = output.textContent.slice(1);
            };

            function identiFyFruit(fruit) {
                return fruit.value == 0 ? "🍎" : "🍌";
            }
        </script>
    </body>
</html>

Salamat po paps, try ko din po.

Javascript masters jan, pa tulong po

Eternal Poster

nakatapos din sa research😂🤣

nakatapos din sa research😂🤣

Eternal Poster

Forum Expert

Attachments

Eternal Poster

Forum Expert

Eternal Poster

Similar threads

Popular Tags

About this Thread

Online statistics