This code below is perfectly suited for testing, I just used it in Visual Studio Code (https://code.visualstudio.com/) and created the page from the 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 path that generates the action="undefined" value is this:
var value_1_2 = d3.select(this).property("market");
document.querySelector('#botao-de-jogo-betfair-1').action = value_1_2;
CSV file "Lista_de_Jogos.csv" is:
label,value,market
,,
hotel,bus,party
house,car,work
The selection box perfectly shows both attributes:
<option value="car" market="work">house</option>
But when I select this <option> house, instead of action of #botao-de-jogo-betfair-1 keep the value work he gets 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"); returns the value carperfectly.
from When selecting an option from the dropdown selection box created via d3.js the value sent to the button becomes undefined
No comments:
Post a Comment