Skip to main content
1 de 2
Daro
  • 81
  • 11

Como modificar el DOM con Javascript cuando el DOM cambia

estoy intentando hacer un juego para una promoción. Me pasaron una ruleta hecha con JavaScript y mi idea es modificarla. En el código actual cuando el usuario hace click la ruleta arroja un resultado en un <h1> . Lo que quisiera es modificar ese código así me devuelve un <a> al que además le pueda incluir un href que me envie a diferentes links dependiendo del descuento que les toca. Pero no encuentro como están imprimiendo ese <h1> y como modificarlo para que sea un <a> y además pasarle la data de la URL al href dependiendo del descuento. Adjunto el código actual

<html>
<head></head>
<body>

<div id="chart"></div>

<div id="question">
   <button id="btn"><h1 id="h1"></h1></button>
</div>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
    var padding = { top: 20, right: 20, bottom: 20, left: 20 },
        w = 500 - padding.left - padding.right,
        h = 500 - padding.top - padding.bottom,
        r = Math.min(w, h) / 2,
        rotation = 0,
        oldrotation = 0,
        picked = 100000,
        oldpick = [],
        color = d3.scale.category20b();//category20c()
    //randomNumbers = getRandomNumbers();

    var data = [
        { "label": "30% off", "value": 1, "question": "You win 30% off" },
        { "label": "35% off", "value": 1, "question": "You win 35% off" },
        { "label": "40% off", "value": 1, "question": "You win 40% off" },
        { "label": "30% off", "value": 1, "question": "You win 30% off" },
        { "label": "35% off", "value": 1, "question": "You win 35% off" },
        { "label": "40% off", "value": 1, "question": "You win 40% off" },
        { "label": "30% off", "value": 1, "question": "You win 30% off" },
        { "label": "35% off", "value": 1, "question": "You win 35% off" },
        { "label": "40% off", "value": 1, "question": "You win 40% off" },
        { "label": "30% off", "value": 1, "question": "You win 30% off" }
        ];

    var svg = d3.select('#chart')

        .append("svg")
        .data([data])
        .attr("width", w + padding.left + padding.right)
        .attr("height", h + padding.top + padding.bottom);

    var container = svg.append("g").attr("class", "chartholder").attr("transform", "translate(" + (w / 2 + padding.left) + "," + (h / 2 + padding.top) + ")");

    var vis = container.append("g");

    var pie = d3.layout.pie().sort(null).value(function (d) { return 1; });

    // declare an arc generator function

    var arc = d3.svg.arc().outerRadius(r);

    // select paths, use arc generator to draw

    var arcs = vis.selectAll("g.slice")

        .data(pie)

        .enter()

        .append("g")

        .attr("class", "slice");

    arcs.append("path")

        .attr("fill", function (d, i) { return color(i); })

        .attr("d", function (d) { return arc(d); });

    // add the text

    arcs.append("text").attr("transform", function (d) {

        d.innerRadius = 0;

        d.outerRadius = r;

        d.angle = (d.startAngle + d.endAngle) / 2;

        return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius - 20) + ")";

    })

        .attr("text-anchor", "end")

        .text(function (d, i) {

            return data[i].label;

        });

    container.on("click", spin);

    function spin(d) {

        container.on("click", null);

        //all slices have been seen, all done

        console.log("OldPick: " + oldpick.length, "Data length: " + data.length);

        if (oldpick.length == data.length) {

            console.log("done");

            container.on("click", null);

            return;

        }

        var ps = 360 / data.length,

            pieslice = Math.round(1440 / data.length),

            rng = Math.floor((Math.random() * 1440) + 360);

        rotation = (Math.round(rng / ps) * ps);

        picked = Math.round(data.length - (rotation % 360) / ps);

        picked = picked >= data.length ? (picked % data.length) : picked;

        if (oldpick.indexOf(picked) !== -1) {

            d3.select(this).call(spin);

            return;

        } else {

            oldpick.push(picked);

        }

        rotation += 90 - Math.round(ps / 2);

        vis.transition()

            .duration(5000)

            .attrTween("transform", rotTween)

            .each("end", function () {

                //mark question as seen

                d3.select(".slice:nth-child(" + (picked + 1) + ") path")

                    .attr("fill", "#98278f");

                //populate question

                d3.select("#question h1")

                    .text(data[picked].question);

                oldrotation = rotation;

            });

    }

    //make arrow

    svg.append("g")

        .attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h / 2) + padding.top) + ")")

        .append("path")

        .attr("d", "M-" + (r * .15) + ",0L0," + (r * .05) + "L0,-" + (r * .05) + "Z")

        .style({ "fill": "#efefef" });

    //draw spin circle

    container.append("circle").attr("cx", 0).attr("cy", 0).attr("r", 60).style({ "fill": "#98278f", "cursor": "pointer" });

    //spin text

    container.append("text").attr("x", 0).attr("y", 10).attr("text-anchor", "middle").text("SPIN NOW").style({ "font-weight": "bold", "font-size": "20px", "fill": "white", "cursor": "pointer" });

    function rotTween(to) {

        var i = d3.interpolate(oldrotation % 360, rotation);

        return function (t) {

            return "rotate(" + i(t) + ")";

        };

    }

    function getRandomNumbers() {

        var array = new Uint16Array(1000);

        var scale = d3.scale.linear().range([360, 1440]).domain([0, 100000]);

        if (window.hasOwnProperty("crypto") && typeof window.crypto.getRandomValues === "function") {

            window.crypto.getRandomValues(array);

            console.log("works");

        } else {

            //no support for crypto, get crappy random numbers

            for (var i = 0; i < 1000; i++) {

                array[i] = Math.floor(Math.random() * 100000) + 1;

                            }

                        }

                        return array;

                    }

                </script>
</body>
</html>
Daro
  • 81
  • 11