When I select one of the drop-down checkbox options created from D3.js instead of returning the correct value, it delivers Undefined

Asked

Viewed 9 times

-1

The code below is totally usual and was created via Visual Studio Code (https://codevisualstudio.com/) and the test page is created via Live Server Extension (https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer):

<html>
    <head>
        </style>
        <script src="https://d3js.org/d3.v4.js"></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 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;
                        var value_1_2 = d3.select(this).property("market");
                        document.querySelector('#botao-de-jogo-betfair-1').action = value_1_2;
                        });
                    let update_1 = select_1.selectAll("option")
                        .data(data);
                    update_1.exit().remove();
                    update_1.enter().append("option").merge(update_1)
                        .attr("value", d => d.value)
                        .attr("market", d => d.market)
                        .text(d => d.label);
                    }
                    d3.csv("Lista_de_Jogos.csv", function(data){caixa_suspensa_1(data)});
                </script>
                <form id="botao-de-jogo-betfair-1" action="" target="_blank">
                    <input type="submit" style="width: 100%;" value="Jogo Betfair 1"/>
                </form>
            </div>
        </div>
    </body>
</html>

The party who delivers action="undefined" that’s the one:

var value_1_2 = d3.select(this).property("market");
document.querySelector('#botao-de-jogo-betfair-1').action = value_1_2;

The archive CSV by name "Lista_de_Jogos.csv" is like this:

label,value,market
,,
hotel,bus,party
house,car,work

The check-box delivers the options with the attributes perfectly:

<option value="car" market="work">house</option>

But when I select <option> house in the check-box, instead of action in #botao-de-jogo-betfair-1 set the value work it fixes the value undefined:

<form id="botao-de-jogo-betfair-1" action="undefined" target="_blank">
                    <input type="submit" style="width: 100%;" value="Jogo Betfair 1">
                </form>

Note: When I try to use .property("value"); it returns the value car correctly.

javascript html html5 html-select d3.js
No answers

Browser other questions tagged javascript html html5 html-select d3.js

You are not signed in. Login or sign up in order to post.