🔒 Closed Javascript masters jan, pa tulong po

PHC-SUIYOBI · 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>

PHC-SUIYOBI · 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

PHC-SUIYOBI · 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>

PHC-SUIYOBI · 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.

Search

Search

🔒 Closed Javascript masters jan, pa tulong po

PHC-SUIYOBI

Eternal Poster

PHC_Jayvee

nakatapos din sa research😂🤣

PHC_Jayvee

nakatapos din sa research😂🤣

PHC-SUIYOBI

Eternal Poster

dev-ace

Forum Expert

PHC-SUIYOBI

Eternal Poster

dev-ace

Forum Expert

PHC-SUIYOBI

Eternal Poster

About this Thread

New Topics

Survey: Best backend for ESP32 IoT projects

REPLIT REPLIT REPLIT

Online Mikrotik Voucher Generator no login required saka wala logging

Next.js hosting DMCA ignored?

Sofia + Luhn algorithm for Spotify Trial Python Code Version Valid IMEI 2026

LF may business/offer services/etc. Gawan kita website for Free

Sa mga vibecoders diyan, Ano po gamit niyong subscription rn since mabilis na maubos ang Copilot?

Pano po ma-cloak or change ang domain name ng fb shared post

WAP MASTER POS PARA SA LAHAT NG STORE

Paano gumawa ng Imei Pattern(Spotify)

Trending Topics

Online now

Forum statistics