Skip to main content

Como ¿Cómo modificar el DOM con Javascript cuando el DOM cambia?

estoyEstoy 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 envieenvíe a diferentes links dependiendo del descuento que les toca. Pero no encuentro como están imprimiendo ese <h1> y comocómo 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

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

¿Cómo 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 envíe a diferentes links dependiendo del descuento que les toca. Pero no encuentro como están imprimiendo ese <h1> y cómo 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

Origen Enlace
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>