score:1

Accepted answer

i've made some adjustments to your code to make it work.

  • first, i moved all the scripts tags to the end of the <body> tag and placed them in order.
  • second, i added d3-fetch.js as a dependency and removed the duplicated d3.js one.
  • third, i disabled all the auto update code in order to test the code and avoid becoming insane.

when i opened the html file with my browser without using a web server, the request for the file failed so the code didn't work. i installed live server in vscode and it started to work immediately, being able to read the file and append elements to the body.

another error i had was uncaught typeerror: document.getelementsbytagname(...)[totalimages] is undefined as it could read the data. once i could open the file, that error disappeared.

<html>
    <head>
        <style>
            body {
            box-sizing: border-box;
            }
            .matches {
            text-align:center;
            float: left;
            width: 355px;
            border: 1px solid white;
            border-collapse: collapse;
            }
            .column {
            text-align:center;
            float: left;
            width: 355px;
            border: 1px solid white;
            border-collapse: collapse;
            }
            .grid {
            float: left;
            width: 1431px;
            }
            .row:after {
            content: "";
            display: table;
            clear: both;
            }
            .button {
            background-color: #33ccff;
            color: black;
            font-weight: bold;
            }
            input[type=submit] {
            background-color: #33ccff;
            color: black;
            font-weight: bold;
            }
            html {
            overflow: scroll;
            overflow-x: hidden;
            }
            ::-webkit-scrollbar {
            width: 0px; /* remove scrollbar space /
            background: transparent; / optional: just make scrollbar invisible /
            }
            / optional: show position indicator in red */
            ::-webkit-scrollbar-thumb {
            background: #ff0000;
            }
        </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.1/d3.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/d3-fetch@3"></script>
    </head>
    <body style="background-color:black;">
        <div style="color:white;font-weight:bold;overflow:hidden;overflow-y:scroll;" class="grid games" id="lista-de-jogos-lateral">
        </div>
    
        <script id="script-da-caixa-de-selecao-suspensa-5">
            var select_5 = d3.select("#lista-de-jogos-lateral")
            .append("div")
            .attr("id","select-box-5")
            .style("width","100%")
            .style("max-height","574px");

            async function update() {

                let data = await d3.csv("./lista_de_jogos.csv");
                console.log("data from csv file: ", {data})

                let update_5 = select_5.selectall(".matches")
                    .data(data,d=>d.label);
                
                update_5.exit().remove();

                // enter new divs:
                const enter = update_5.enter()
                    .append("div")
                    .attr("class","matches")
                
                // append the children to entered divs:
                enter.append("form")
                    .attr("action",d => d.market)
                    .attr("target","_blank")
                    .style("width","100%")
                    .append("input")
                    .attr("type","submit")
                    .attr("target","_blank")
                    .style("width","100%")
                    .attr("value","jogo betfair");
                
                enter.append("form")
                    .append("input")
                    .attr("type","text")
                    .attr("id",d => "barra-de-texto-para-grafico-" + d.numbergame)
                    .style("width","100%")
                    .attr("value", d=>d.label);
                    
                enter.append("img")
                    .attr("type","text")
                    .attr("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")
                    .attr("name",d => "grafico-betfair-" + d.numbergame);
            }
            
            update();
            console.log("auto csv update is disabled!")
            //setinterval(update,2000);
        </script>
        <script id="auto-update-images">
            let interval_images
                window.addeventlistener('domcontentloaded', () => {
                    console.log("auto update images is disabled!")
                    interval_images = refresh_images(); //setinterval(refresh_images, 5000); // refresh every 5 sec
                })
                
            function refresh_images() {
                if (!document.images) return;
                const totalimages = document.queryselectorall("img").length - 1;
                const lastimages = parseint(document.getelementsbytagname('img')[totalimages].getattribute('name').replace("grafico-betfair-", "")) + 1;
                for (let i = 1; i < lastimages; i++) {
                    try {
                        document.images['grafico-betfair-' + i].src = document.getelementbyid('barra-de-texto-para-grafico-' + i).value;
                    } catch (e) {
                    }
                }
            }
        </script>
        <script id="random-number">
            function generaterandomintegerinrange(min, max) {
                return math.floor(math.random() * (max - min + 1)) + min;
            }
        </script>
    </body>
</html>

if you try to run this code with the "run code snippet" button, it will fail as it doesn't have access to the csv file. it should work with valid data, though. your code is expecting to replace the images url by using a field available in the csv file so make sure your data has those fields.


Related Query

More Query from same tag