#StackBounty: #javascript #html #d3.js list of games to open radar match in iframe on for drop-down controls

Bounty: 100

In general my page is slow and has several points in the code that I believe can be improved, even in relation to the structure used. Anyway, the biggest problem is:

The page I’m creating is very simple, the problem is that I created the entire first <div class="column ..."> but then I had to use the famous Ctrl + C and Ctrl + V to create the other <div class="column ..."> because I don’t know how to group scripts – this is making page load slower.

The <select> elements for example is created from script’s. They told me that there is a way to make the 4 scripts (one in each <div class="column ...">) become one using looping, decreasing the loading the page, but I don’t know how to make this improvement.

I was also told about the risk of using so many equal headers, as I use the <script src="https://d3js.org/d3.v4.js"></script> four times but how I need it for the 4 scripts, I don’t know how I could place it only once unless I merge the 4 scripts into one.

References for code citations:

Scripts to <select> creation:

<script id="script-da-caixa-de-selecao-suspensa-1">
<script id="script-da-caixa-de-selecao-suspensa-2">
<script id="script-da-caixa-de-selecao-suspensa-3">
<script id="script-da-caixa-de-selecao-suspensa-4">

Example of the .csv file ("Lista_de_Jogos.csv") that is used to create dropdown selection boxes:

label,value
,
Oriente Petrolero v Aurora,http://sports.williamhill.com/bet/pt/betting/e/21185256/Oriente+Petrolero+v+Aurora.html
Pereira v Alianza Petrolera,http://sports.williamhill.com/bet/pt/betting/e/21150687/Pereira+v+Alianza+Petrolera.html
Tijuana (Women) v Toluca (Women),http://sports.williamhill.com/bet/pt/betting/e/21193317/Tijuana+%28Women%29+v+Toluca+%28Women%29.html
Cruz Azul v Mazatlan,http://sports.williamhill.com/bet/pt/betting/e/21090457/Cruz+Azul+v+Mazatlan.html

Screenshot to drop down box created by <script>:

enter image description here

There are other improvements that can be made to shorten the code and speed up the page, but my knowledge is still very small and I need help both to learn and produce results. Thank you in advance for your attention and help!

My Code:

<html>
    <head>
        <style>
            {
            box-sizing: border-box;
            }
            .column {
            text-align:center;
            float: left;
            width: 355;
            border: 1px solid white;
            border-collapse: collapse;
            }
            .row:after {
            content: "";
            display: table;
            clear: both;
            }
            .button {
            background-color: #33ccff;
            color: black;
            font-weight: bold;
            }
            body {
            overflow: hidden;
            }
        </style>
        <script id="auto-update-images">
            let interval_images
            window.addEventListener('DOMContentLoaded', () => {
                interval_images = setInterval(refresh_images, 500); // refresh every 0.5 secs
            })
            
            function refresh_images() {
                if (!document.images) return;
                document.images['grafico-betfair-1'].src = document.getElementById('barra-de-texto-para-grafico-1').value;
                document.images['grafico-betfair-2'].src = document.getElementById('barra-de-texto-para-grafico-2').value;
                document.images['grafico-betfair-3'].src = document.getElementById('barra-de-texto-para-grafico-3').value;
                document.images['grafico-betfair-4'].src = document.getElementById('barra-de-texto-para-grafico-4').value;
            }
        </script>
        <script id="auto-update-csv">
            let interval_csv
            window.addEventListener('DOMContentLoaded', () => {
                interval_csv = setInterval(refresh_csv, 60000); // refresh every 60 secs
            })
            
            function refresh_csv() {
                d3.csv("Lista_de_Jogos.csv", function(data){caixa_suspensa_1(data)});
                d3.csv("Lista_de_Jogos.csv", function(data){caixa_suspensa_2(data)});
                d3.csv("Lista_de_Jogos.csv", function(data){caixa_suspensa_3(data)});
                d3.csv("Lista_de_Jogos.csv", function(data){caixa_suspensa_4(data)});
            }
        </script>
    </head>
    <body style="background-color:black;">
        <div class="row">
            <div class="column left">
                <form action="" method="post" id="formulario-radar-1">
                    <div id="caixa-suspensa-1">
                        <button class="button" id="botao-do-radar-1" onclick="funcao_radar_1()">Radar 1</button>
                        <input type="text" id="barra-de-texto-para-radar-1" style="width: 283px;">
                    </div>
                </form>
                <iframe id="iframe-do-radar-1" width="100%" height="282" frameBorder="0" src="">
                </iframe>
                <script src="https://d3js.org/d3.v4.js"></script>
                <script id="script-da-caixa-de-selecao-suspensa-1">
                    var select_1 = d3.select("#caixa-suspensa-1")
                    .append("select")
                    .attr("id","select-box-1")
                    .style("width","100%");
                    
                    function caixa_suspensa_1(data) {
                    select_1
                        .on("change", function(d) {
                        var value_1 = d3.select(this).property("value");
                        document.querySelector('#barra-de-texto-para-radar-1').value = value_1;
                        document.getElementById('botao-do-radar-1').click();
                        });
                    let update_1 = select_1.selectAll("option")
                        .data(data);
                    update_1.exit().remove();
                    update_1.enter().append("option").merge(update_1)
                        .attr("value", function (d) { return d.value; })
                        .text(function (d) { return d.label; });
                    }
                    d3.csv("Lista_de_Jogos.csv", function(data){caixa_suspensa_1(data)});
                </script>
                <script id="script-para-ativar-iframe-1">
                    function funcao_radar_1() {
                        "use strict";
                        var url_setter = document.getElementById('formulario-radar-1'), url = document.getElementById('barra-de-texto-para-radar-1'), the_iframe = document.getElementById('iframe-do-radar-1');
                        url_setter.onsubmit = function (event) {
                            try {
                                let link = document.getElementById("barra-de-texto-para-radar-1").value;
                                let valor_da_barra_de_texto_1 = link.split("OB_EV")[1];
                                valor_da_barra_de_texto_1 = valor_da_barra_de_texto_1.split("/")[0];
                                    event.preventDefault();
                                    the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + valor_da_barra_de_texto_1;
                            } catch (e) {
                                        try {
                                            let link = document.getElementById("barra-de-texto-para-radar-1").value;
                                            let valor_da_barra_de_texto_1 = link.split("betting/e/")[1];
                                            valor_da_barra_de_texto_1 = valor_da_barra_de_texto_1.split("/")[0];
                                                event.preventDefault();
                                                the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + valor_da_barra_de_texto_1;
                                        } catch (e) {
                                                    event.preventDefault();
                                                    the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
                                        }
                            }
                        };
                    }
                </script>
                <form action="" method="post" id="formulario-grafico-1">
                    <div>
                        <input type="text" id="barra-de-texto-para-grafico-1" style="width: 100%;">
                    </div>
                </form>
                <img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="grafico-betfair-1">
                <form action="" method="post" id="formulario-para-limpar-texto-1">
                    <div>
                        <button class="button" style="width: 100%;" id="botao-de-limpar-texto-1" onclick="limpar_texto_1()">Limpar Tudo <br/>1</button>
                    </div>
                </form>
                <script id="script-para-limpar-dados-1">
                    function limpar_texto_1() {
                        var btn = document.getElementById('formulario-para-limpar-texto-1');
                        btn.onclick = function(e){ 
                            e.preventDefault();
                            document.getElementById('barra-de-texto-para-grafico-1').value="";
                            document.getElementById('barra-de-texto-para-radar-1').value="";
                            document.getElementById('botao-do-radar-1').click();
                            document.getElementById("select-box-1").selectedIndex = "0";
                        };
                    }
                </script>
            </div>
            <div class="column middle1">
                <form action="" method="post" id="formulario-radar-2">
                    <div id="caixa-suspensa-2">
                        <button class="button" id="botao-do-radar-2" onclick="funcao_radar_2()">Radar 2</button>
                        <input type="text" id="barra-de-texto-para-radar-2" style="width: 283px;">
                    </div>
                </form>
                <iframe id="iframe-do-radar-2" width="100%" height="282" frameBorder="0" src="">
                </iframe>
                <script src="https://d3js.org/d3.v4.js"></script>
                <script id="script-da-caixa-de-selecao-suspensa-2">
                    var select_2 = d3.select("#caixa-suspensa-2")
                    .append("select")
                    .attr("id","select-box-2")
                    .style("width","100%");
                    
                    function caixa_suspensa_2(data) {
                    select_2
                        .on("change", function(d) {
                        var value_2 = d3.select(this).property("value");
                        document.querySelector('#barra-de-texto-para-radar-2').value = value_2;
                        document.getElementById('botao-do-radar-2').click();
                        });
                    let update_2 = select_2.selectAll("option")
                        .data(data);
                    update_2.exit().remove();
                    update_2.enter().append("option").merge(update_2)
                        .attr("value", function (d) { return d.value; })
                        .text(function (d) { return d.label; });
                    }
                    d3.csv("Lista_de_Jogos.csv", function(data){caixa_suspensa_2(data)});
                </script>
                <script id="script-para-ativar-iframe-2">
                    function funcao_radar_2() {
                        "use strict";
                        var url_setter = document.getElementById('formulario-radar-2'), url = document.getElementById('barra-de-texto-para-radar-2'), the_iframe = document.getElementById('iframe-do-radar-2');
                        url_setter.onsubmit = function (event) {
                            try {
                                let link = document.getElementById("barra-de-texto-para-radar-2").value;
                                let valor_da_barra_de_texto_2 = link.split("OB_EV")[1];
                                valor_da_barra_de_texto_2 = valor_da_barra_de_texto_2.split("/")[0];
                                    event.preventDefault();
                                    the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + valor_da_barra_de_texto_2;
                            } catch (e) {
                                        try {
                                            let link = document.getElementById("barra-de-texto-para-radar-2").value;
                                            let valor_da_barra_de_texto_2 = link.split("betting/e/")[1];
                                            valor_da_barra_de_texto_2 = valor_da_barra_de_texto_2.split("/")[0];
                                                event.preventDefault();
                                                the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + valor_da_barra_de_texto_2;
                                        } catch (e) {
                                                    event.preventDefault();
                                                    the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
                                        }
                            }
                        };
                    }
                </script>
                <form action="" method="post" id="formulario-grafico-2">
                    <div>
                        <input type="text" id="barra-de-texto-para-grafico-2" style="width: 100%;">
                    </div>
                </form>
                <img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="grafico-betfair-2">
                <form action="" method="post" id="formulario-para-limpar-texto-2">
                    <div>
                        <button class="button" style="width: 100%;" id="botao-de-limpar-texto-2" onclick="limpar_texto_2()">Limpar Tudo <br/>2</button>
                    </div>
                </form>
                <script id="script-para-limpar-dados-2">
                    function limpar_texto_2() {
                        var btn = document.getElementById('formulario-para-limpar-texto-2');
                        btn.onclick = function(e){ 
                            e.preventDefault();
                            document.getElementById('barra-de-texto-para-grafico-2').value="";
                            document.getElementById('barra-de-texto-para-radar-2').value="";
                            document.getElementById('botao-do-radar-2').click();
                            document.getElementById("select-box-2").selectedIndex = "0";
                        };
                    }
                </script>
            </div>
            <div class="column middle2">
                <form action="" method="post" id="formulario-radar-3">
                    <div id="caixa-suspensa-3">
                        <button class="button" id="botao-do-radar-3" onclick="funcao_radar_3()">Radar 3</button>
                        <input type="text" id="barra-de-texto-para-radar-3" style="width: 283px;">
                    </div>
                </form>
                <iframe id="iframe-do-radar-3" width="100%" height="282" frameBorder="0" src="">
                </iframe>
                <script src="https://d3js.org/d3.v4.js"></script>
                <script id="script-da-caixa-de-selecao-suspensa-3">
                    var select_3 = d3.select("#caixa-suspensa-3")
                    .append("select")
                    .attr("id","select-box-3")
                    .style("width","100%");
                    
                    function caixa_suspensa_3(data) {
                    select_3
                        .on("change", function(d) {
                        var value_3 = d3.select(this).property("value");
                        document.querySelector('#barra-de-texto-para-radar-3').value = value_3;
                        document.getElementById('botao-do-radar-3').click();
                        });
                    let update_3 = select_3.selectAll("option")
                        .data(data);
                    update_3.exit().remove();
                    update_3.enter().append("option").merge(update_3)
                        .attr("value", function (d) { return d.value; })
                        .text(function (d) { return d.label; });
                    }
                    d3.csv("Lista_de_Jogos.csv", function(data){caixa_suspensa_3(data)});
                </script>
                <script id="script-para-ativar-iframe-3">
                    function funcao_radar_3() {
                        "use strict";
                        var url_setter = document.getElementById('formulario-radar-3'), url = document.getElementById('barra-de-texto-para-radar-3'), the_iframe = document.getElementById('iframe-do-radar-3');
                        url_setter.onsubmit = function (event) {
                            try {
                                let link = document.getElementById("barra-de-texto-para-radar-3").value;
                                let valor_da_barra_de_texto_3 = link.split("OB_EV")[1];
                                valor_da_barra_de_texto_3 = valor_da_barra_de_texto_3.split("/")[0];
                                    event.preventDefault();
                                    the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + valor_da_barra_de_texto_3;
                            } catch (e) {
                                        try {
                                            let link = document.getElementById("barra-de-texto-para-radar-3").value;
                                            let valor_da_barra_de_texto_3 = link.split("betting/e/")[1];
                                            valor_da_barra_de_texto_3 = valor_da_barra_de_texto_3.split("/")[0];
                                                event.preventDefault();
                                                the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + valor_da_barra_de_texto_3;
                                        } catch (e) {
                                                    event.preventDefault();
                                                    the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
                                        }
                            }
                        };
                    }
                </script>
                <form action="" method="post" id="formulario-grafico-3">
                    <div>
                        <input type="text" id="barra-de-texto-para-grafico-3" style="width: 100%;">
                    </div>
                </form>
                <img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="grafico-betfair-3">
                <form action="" method="post" id="formulario-para-limpar-texto-3">
                    <div>
                        <button class="button" style="width: 100%;" id="botao-de-limpar-texto-3" onclick="limpar_texto_3()">Limpar Tudo <br/>3</button>
                    </div>
                </form>
                <script id="script-para-limpar-dados-3">
                    function limpar_texto_3() {
                        var btn = document.getElementById('formulario-para-limpar-texto-3');
                        btn.onclick = function(e){ 
                            e.preventDefault();
                            document.getElementById('barra-de-texto-para-grafico-3').value="";
                            document.getElementById('barra-de-texto-para-radar-3').value="";
                            document.getElementById('botao-do-radar-3').click();
                            document.getElementById("select-box-3").selectedIndex = "0";
                        };
                    }
                </script>
            </div>
            <div class="column right">
                <form action="" method="post" id="formulario-radar-4">
                    <div id="caixa-suspensa-4">
                        <button class="button" id="botao-do-radar-4" onclick="funcao_radar_4()">Radar 4</button>
                        <input type="text" id="barra-de-texto-para-radar-4" style="width: 283px;">
                    </div>
                </form>
                <iframe id="iframe-do-radar-4" width="100%" height="282" frameBorder="0" src="">
                </iframe>
                <script src="https://d3js.org/d3.v4.js"></script>
                <script id="script-da-caixa-de-selecao-suspensa-4">
                    var select_4 = d3.select("#caixa-suspensa-4")
                    .append("select")
                    .attr("id","select-box-4")
                    .style("width","100%");
                    
                    function caixa_suspensa_4(data) {
                    select_4
                        .on("change", function(d) {
                        var value_4 = d3.select(this).property("value");
                        document.querySelector('#barra-de-texto-para-radar-4').value = value_4;
                        document.getElementById('botao-do-radar-4').click();
                        });
                    let update_4 = select_4.selectAll("option")
                        .data(data);
                    update_4.exit().remove();
                    update_4.enter().append("option").merge(update_4)
                        .attr("value", function (d) { return d.value; })
                        .text(function (d) { return d.label; });
                    }
                    d3.csv("Lista_de_Jogos.csv", function(data){caixa_suspensa_4(data)});
                </script>
                <script id="script-para-ativar-iframe-4">
                    function funcao_radar_4() {
                        "use strict";
                        var url_setter = document.getElementById('formulario-radar-4'), url = document.getElementById('barra-de-texto-para-radar-4'), the_iframe = document.getElementById('iframe-do-radar-4');
                        url_setter.onsubmit = function (event) {
                            try {
                                let link = document.getElementById("barra-de-texto-para-radar-4").value;
                                let valor_da_barra_de_texto_4 = link.split("OB_EV")[1];
                                valor_da_barra_de_texto_4 = valor_da_barra_de_texto_4.split("/")[0];
                                    event.preventDefault();
                                    the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + valor_da_barra_de_texto_4;
                            } catch (e) {
                                        try {
                                            let link = document.getElementById("barra-de-texto-para-radar-4").value;
                                            let valor_da_barra_de_texto_4 = link.split("betting/e/")[1];
                                            valor_da_barra_de_texto_4 = valor_da_barra_de_texto_4.split("/")[0];
                                                event.preventDefault();
                                                the_iframe.src = "https://sports.staticcache.org/scoreboards/scoreboards-football/index.html?eventId=" + valor_da_barra_de_texto_4;
                                        } catch (e) {
                                                    event.preventDefault();
                                                    the_iframe.src = "https://image.flaticon.com/icons/png/128/26/26547.png";
                                        }
                            }
                        };
                    }
                </script>
                <form action="" method="post" id="formulario-grafico-4">
                    <div>
                        <input type="text" id="barra-de-texto-para-grafico-4" style="width: 100%;">
                    </div>
                </form>
                <img src="https://sitedeapostas-com.imgix.net/assets/local/Company/logos/betfair_logo_transp.png?auto=compress%2Cformat&fit=clip&q=75&w=263&s=c1691b4034fd0c4526d27ffe8b1e839c" name="grafico-betfair-4">
                <form action="" method="post" id="formulario-para-limpar-texto-4">
                    <div>
                        <button class="button" style="width: 100%;" id="botao-de-limpar-texto-4" onclick="limpar_texto_4()">Limpar Tudo <br/>4</button>
                    </div>
                </form>
                <script id="script-para-limpar-dados-4">
                    function limpar_texto_4() {
                        var btn = document.getElementById('formulario-para-limpar-texto-4');
                        btn.onclick = function(e){ 
                            e.preventDefault();
                            document.getElementById('barra-de-texto-para-grafico-4').value="";
                            document.getElementById('barra-de-texto-para-radar-4').value="";
                            document.getElementById('botao-do-radar-4').click();
                            document.getElementById("select-box-4").selectedIndex = "0";
                        };
                    }
                </script>
            </div>
        </div>
    </body>
</html>


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.