Help optimize JS code

HTML = 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
        <div id="votingwindow">
            <div class="votequestion">Do you support a compulsory vaccination campaign ?</div>

            <button id="voteanswer1" onclick="button1()"><p id="answerOne">Strongly in favour</p></button>
            <button id="voteanswer2" onclick="button2()"><p id="answerTwo"></p>Slightly in favour</button>
            <button id="voteanswer3" onclick="button3()"><p id="answerThree"></p>Slightly against</button>
            <button id="voteanswer4" onclick="button4()"><p id="answerFour"></p>Strongly against</button>
            

        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS = 
.main {
    width: 100vw;
    height: 100vh;
    background-image: url(Pics/votingBackgroundWhite.jpg);
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    
}
#votingwindow {
    width: 500px;
    height: 400px;
    background-color: rgb(212, 205, 244, 0.25);
    
}
.votequestion {
    background-color: #6290c3;
    width: 99%;
    height: 20%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-style: Cursive;
    font-size: 20px;
}





/* VOTE ANSWERS !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
#voteanswer1 {
    background-color: #b5e2fa;
    width: 88%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top:2%;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    border-color: rgb(48, 99, 142);
}

#voteanswer2 {
    background-color: #b5e2fa;
    width: 88%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top:2%;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    border-color: rgb(48, 99, 142);
}

#voteanswer3 {
    background-color: #b5e2fa;
    width: 88%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top:2%;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    border-color: rgb(48, 99, 142);
}

#voteanswer4 {
    background-color: #b5e2fa;
    width: 88%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top:2%;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    border-color:  rgb(48, 99, 142);
}

JS = 




var clicks1 = 0;
var clicks2 = 0;
var clicks3 = 0;
var clicks4 = 0;


var rel1;
var rel2;
var rel3;
var rel4;
var sumOfVotes;
var onePercent;


function button1() {
    
    clicks1 += 1;
    sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
    onePercent = sumOfVotes / 100;
    rel1 = Math.round((clicks1 / onePercent)*100)/100;
    rel2 = Math.round((clicks2 / onePercent)*100)/100;
    rel3 = Math.round((clicks3 / onePercent)*100)/100;
    rel4 = Math.round((clicks4 / onePercent)*100)/100;

    document.getElementById("voteanswer1").innerHTML = "";
    document.getElementById("voteanswer2").innerHTML = "";
    document.getElementById("voteanswer3").innerHTML = "";
    document.getElementById("voteanswer4").innerHTML = "";

    var div1 = document.createElement("div");
    div1.setAttribute("id","firstResult");
    document.getElementById("voteanswer1").appendChild(div1);
    document.getElementById("firstResult").innerHTML = clicks1 + " votes    " + rel1 + "%";
    div1.style.fontStyle = "Serif";
    div1.style.fontSize = "16px";
    div1.style.color = "#495159";
    div1.style.position = "absolute";
    div1.style.left = "10%";
    div1.style.backgroundColor = "transparent";
    div1.style.zIndex = 2;



    var div2 = document.createElement("div");
    div2.setAttribute("id","secondResult");
    document.getElementById("voteanswer2").appendChild(div2);
    document.getElementById("secondResult").innerHTML = clicks2 + " votes    " + rel2 + "%";
    div2.style.fontStyle = "Serif";
    div2.style.fontSize = "16px";
    div2.style.color = "#495159";
    div2.style.position = "absolute";
    div2.style.left = "10%";
    div2.style.backgroundColor = "transparent";
    div2.style.zIndex = 2;

    var div3 = document.createElement("div");
    div3.setAttribute("id","thirdResult");
    document.getElementById("voteanswer3").appendChild(div3);
    document.getElementById("thirdResult").innerHTML = clicks3 + " votes    " + rel3 + "%";
    div3.style.fontStyle = "Serif";
    div3.style.fontSize = "16px";
    div3.style.color = "#495159";
    div3.style.position = "absolute";
    div3.style.left = "10%";
    div3.style.backgroundColor = "transparent";
    div3.style.zIndex = 2;

    var div4 = document.createElement("div");
    div4.setAttribute("id","forthResult");
    document.getElementById("voteanswer4").appendChild(div4);
    document.getElementById("forthResult").innerHTML = clicks4 + " votes    " + rel4 + "%";
    div4.style.fontStyle = "Serif";
    div4.style.fontSize = "16px";
    div4.style.color = "#495159";
    div4.style.position = "absolute";
    div4.style.left = "10%";
    div4.style.backgroundColor = "transparent";
    div4.style.zIndex = 2;




    var div5 = document.createElement("div");
    document.getElementById("voteanswer1").appendChild(div5);
    div5.style.position = "absolute";
    div5.style.left = 0;
    div5.style.width = rel1 + "%";
    div5.style.height = "120px";
    div5.style.backgroundColor = "#9fd6f5";
    div5.style.zIndex = 1;

    var div6 = document.createElement("div");
    document.getElementById("voteanswer2").appendChild(div6);
    div6.style.position = "absolute";
    div6.style.left = 0;
    div6.style.width = rel2 + "%";
    div6.style.height = "120px";
    div6.style.backgroundColor = "#9fd6f5";
    div6.style.zIndex = 1;

    var div7 = document.createElement("div");
    document.getElementById("voteanswer3").appendChild(div7);
    div7.style.position = "absolute";
    div7.style.left = 0;
    div7.style.width = rel3 + "%";
    div7.style.height = "120px";
    div7.style.backgroundColor = "#9fd6f5";
    div7.style.zIndex = 1;

    var div8 = document.createElement("div");
    document.getElementById("voteanswer4").appendChild(div8);
    div8.style.position = "absolute";
    div8.style.left = 0;
    div8.style.width = rel4 + "%";
    div8.style.height = "120px";
    div8.style.backgroundColor = "#9fd6f5";
    div8.style.zIndex = 1;

    var div9 = document.createElement("div");
    div9.setAttribute("id","firstAdd");
    document.getElementById("voteanswer1").appendChild(div9);
    document.getElementById("firstAdd").innerHTML = "... would vote for Hitler";
    div9.style.fontStyle = "Serif";
    div9.style.fontSize = "16px";
    div9.style.color = "#495159";
    div9.style.position = "absolute";
    div9.style.left = "50%";
    div9.style.backgroundColor = "transparent";
    div9.style.zIndex = 2;

    var div10 = document.createElement("div");
    div10.setAttribute("id","secondAdd");
    document.getElementById("voteanswer2").appendChild(div10);
    document.getElementById("secondAdd").innerHTML = "... are insecure";
    div10.style.fontStyle = "Serif";
    div10.style.fontSize = "16px";
    div10.style.color = "#495159";
    div10.style.position = "absolute";
    div10.style.left = "50%";
    div10.style.backgroundColor = "transparent";
    div10.style.zIndex = 2;

    var div11 = document.createElement("div");
    div11.setAttribute("id","thirdAdd");
    document.getElementById("voteanswer3").appendChild(div11);
    document.getElementById("thirdAdd").innerHTML = "... are quiet rational";
    div11.style.fontStyle = "Serif";
    div11.style.fontSize = "16px";
    div11.style.color = "#495159";
    div11.style.position = "absolute";
    div11.style.left = "50%";
    div11.style.backgroundColor = "transparent";
    div11.style.zIndex = 2;

    
    var div12 = document.createElement("div");
    div12.setAttribute("id","forthAdd");
    document.getElementById("voteanswer4").appendChild(div12);
    document.getElementById("forthAdd").innerHTML = "... write Freedom in CAPS";
    div12.style.fontStyle = "Serif";
    div12.style.fontSize = "16px";
    div12.style.color = "#495159";
    div12.style.position = "absolute";
    div12.style.left = "50%";
    div12.style.backgroundColor = "transparent";
    div12.style.zIndex = 2;
    
}

function button2() {
    
    clicks2 += 1;
    sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
    onePercent = sumOfVotes / 100;
    rel1 = Math.round((clicks1 / onePercent)*100)/100;
    rel2 = Math.round((clicks2 / onePercent)*100)/100;
    rel3 = Math.round((clicks3 / onePercent)*100)/100;
    rel4 = Math.round((clicks4 / onePercent)*100)/100;

    document.getElementById("voteanswer1").innerHTML = "";
    document.getElementById("voteanswer2").innerHTML = "";
    document.getElementById("voteanswer3").innerHTML = "";
    document.getElementById("voteanswer4").innerHTML = "";

    var div1 = document.createElement("div");
    div1.setAttribute("id","firstResult");
    document.getElementById("voteanswer1").appendChild(div1);
    document.getElementById("firstResult").innerHTML = clicks1 + " votes    " + rel1 + "%";
    div1.style.fontStyle = "Serif";
    div1.style.fontSize = "16px";
    div1.style.color = "#495159";
    div1.style.position = "absolute";
    div1.style.left = "10%";
    div1.style.backgroundColor = "transparent";
    div1.style.zIndex = 2;

    var div2 = document.createElement("div");
    div2.setAttribute("id","secondResult");
    document.getElementById("voteanswer2").appendChild(div2);
    document.getElementById("secondResult").innerHTML = clicks2 + " votes    " + rel2 + "%";
    div2.style.fontStyle = "Serif";
    div2.style.fontSize = "16px";
    div2.style.color = "#495159";
    div2.style.position = "absolute";
    div2.style.left = "10%";
    div2.style.backgroundColor = "transparent";
    div2.style.zIndex = 2;

    var div3 = document.createElement("div");
    div3.setAttribute("id","thirdResult");
    document.getElementById("voteanswer3").appendChild(div3);
    document.getElementById("thirdResult").innerHTML = clicks3 + " votes    " + rel3 + "%";
    div3.style.fontStyle = "Serif";
    div3.style.fontSize = "16px";
    div3.style.color = "#495159";
    div3.style.position = "absolute";
    div3.style.left = "10%";
    div3.style.backgroundColor = "transparent";
    div3.style.zIndex = 2;

    var div4 = document.createElement("div");
    div4.setAttribute("id","forthResult");
    document.getElementById("voteanswer4").appendChild(div4);
    document.getElementById("forthResult").innerHTML = clicks4 + " votes    " + rel4 + "%";
    div4.style.fontStyle = "Serif";
    div4.style.fontSize = "16px";
    div4.style.color = "#495159";
    div4.style.position = "absolute";
    div4.style.left = "10%";
    div4.style.backgroundColor = "transparent";
    div4.style.zIndex = 2;




    var div5 = document.createElement("div");
    document.getElementById("voteanswer1").appendChild(div5);
    div5.style.position = "absolute";
    div5.style.left = 0;
    div5.style.width = rel1 + "%";
    div5.style.height = "120px";
    div5.style.backgroundColor = "#9fd6f5";
    div5.style.zIndex = 1;

    var div6 = document.createElement("div");
    document.getElementById("voteanswer2").appendChild(div6);
    div6.style.position = "absolute";
    div6.style.left = 0;
    div6.style.width = rel2 + "%";
    div6.style.height = "120px";
    div6.style.backgroundColor = "#9fd6f5";
    div6.style.zIndex = 1;

    var div7 = document.createElement("div");
    document.getElementById("voteanswer3").appendChild(div7);
    div7.style.position = "absolute";
    div7.style.left = 0;
    div7.style.width = rel3 + "%";
    div7.style.height = "120px";
    div7.style.backgroundColor = "#9fd6f5";
    div7.style.zIndex = 1;

    var div8 = document.createElement("div");
    document.getElementById("voteanswer4").appendChild(div8);
    div8.style.position = "absolute";
    div8.style.left = 0;
    div8.style.width = rel4 + "%";
    div8.style.height = "120px";
    div8.style.backgroundColor = "#9fd6f5";
    div8.style.zIndex = 1;
    
    var div9 = document.createElement("div");
    div9.setAttribute("id","firstAdd");
    document.getElementById("voteanswer1").appendChild(div9);
    document.getElementById("firstAdd").innerHTML = "... would vote for Hitler";
    div9.style.fontStyle = "Serif";
    div9.style.fontSize = "16px";
    div9.style.color = "#495159";
    div9.style.position = "absolute";
    div9.style.left = "50%";
    div9.style.backgroundColor = "transparent";
    div9.style.zIndex = 2;

    var div10 = document.createElement("div");
    div10.setAttribute("id","secondAdd");
    document.getElementById("voteanswer2").appendChild(div10);
    document.getElementById("secondAdd").innerHTML = "... are insecure";
    div10.style.fontStyle = "Serif";
    div10.style.fontSize = "16px";
    div10.style.color = "#495159";
    div10.style.position = "absolute";
    div10.style.left = "50%";
    div10.style.backgroundColor = "transparent";
    div10.style.zIndex = 2;

    var div11 = document.createElement("div");
    div11.setAttribute("id","thirdAdd");
    document.getElementById("voteanswer3").appendChild(div11);
    document.getElementById("thirdAdd").innerHTML = "... are quiet rational";
    div11.style.fontStyle = "Serif";
    div11.style.fontSize = "16px";
    div11.style.color = "#495159";
    div11.style.position = "absolute";
    div11.style.left = "50%";
    div11.style.backgroundColor = "transparent";
    div11.style.zIndex = 2;

    
    var div12 = document.createElement("div");
    div12.setAttribute("id","forthAdd");
    document.getElementById("voteanswer4").appendChild(div12);
    document.getElementById("forthAdd").innerHTML = "... write Freedom in CAPS";
    div12.style.fontStyle = "Serif";
    div12.style.fontSize = "16px";
    div12.style.color = "#495159";
    div12.style.position = "absolute";
    div12.style.left = "50%";
    div12.style.backgroundColor = "transparent";
    div12.style.zIndex = 2;
}

function button3() {
    
    clicks3 += 1;
    sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
    onePercent = sumOfVotes / 100;
    rel1 = Math.round((clicks1 / onePercent)*100)/100;
    rel2 = Math.round((clicks2 / onePercent)*100)/100;
    rel3 = Math.round((clicks3 / onePercent)*100)/100;
    rel4 = Math.round((clicks4 / onePercent)*100)/100;

    document.getElementById("voteanswer1").innerHTML = "";
    document.getElementById("voteanswer2").innerHTML = "";
    document.getElementById("voteanswer3").innerHTML = "";
    document.getElementById("voteanswer4").innerHTML = "";

    var div1 = document.createElement("div");
    div1.setAttribute("id","firstResult");
    document.getElementById("voteanswer1").appendChild(div1);
    document.getElementById("firstResult").innerHTML = clicks1 + " votes    " + rel1 + "%";
    div1.style.fontStyle = "Serif";
    div1.style.fontSize = "16px";
    div1.style.color = "#495159";
    div1.style.position = "absolute";
    div1.style.left = "10%";
    div1.style.backgroundColor = "transparent";
    div1.style.zIndex = 2;

    var div2 = document.createElement("div");
    div2.setAttribute("id","secondResult");
    document.getElementById("voteanswer2").appendChild(div2);
    document.getElementById("secondResult").innerHTML = clicks2 + " votes    " + rel2 + "%";
    div2.style.fontStyle = "Serif";
    div2.style.fontSize = "16px";
    div2.style.color = "#495159";
    div2.style.position = "absolute";
    div2.style.left = "10%";
    div2.style.backgroundColor = "transparent";
    div2.style.zIndex = 2;

    var div3 = document.createElement("div");
    div3.setAttribute("id","thirdResult");
    document.getElementById("voteanswer3").appendChild(div3);
    document.getElementById("thirdResult").innerHTML = clicks3 + " votes    " + rel3 + "%";
    div3.style.fontStyle = "Serif";
    div3.style.fontSize = "16px";
    div3.style.color = "#495159";
    div3.style.position = "absolute";
    div3.style.left = "10%";
    div3.style.backgroundColor = "transparent";
    div3.style.zIndex = 2;

    var div4 = document.createElement("div");
    div4.setAttribute("id","forthResult");
    document.getElementById("voteanswer4").appendChild(div4);
    document.getElementById("forthResult").innerHTML = clicks4 + " votes    " + rel4 + "%";
    div4.style.fontStyle = "Serif";
    div4.style.fontSize = "16px";
    div4.style.color = "#495159";
    div4.style.position = "absolute";
    div4.style.left = "10%";
    div4.style.backgroundColor = "transparent";
    div4.style.zIndex = 2;




    var div5 = document.createElement("div");
    document.getElementById("voteanswer1").appendChild(div5);
    div5.style.position = "absolute";
    div5.style.left = 0;
    div5.style.width = rel1 + "%";
    div5.style.height = "120px";
    div5.style.backgroundColor = "#9fd6f5";
    div5.style.zIndex = 1;

    var div6 = document.createElement("div");
    document.getElementById("voteanswer2").appendChild(div6);
    div6.style.position = "absolute";
    div6.style.left = 0;
    div6.style.width = rel2 + "%";
    div6.style.height = "120px";
    div6.style.backgroundColor = "#9fd6f5";
    div6.style.zIndex = 1;

    var div7 = document.createElement("div");
    document.getElementById("voteanswer3").appendChild(div7);
    div7.style.position = "absolute";
    div7.style.left = 0;
    div7.style.width = rel3 + "%";
    div7.style.height = "120px";
    div7.style.backgroundColor = "#9fd6f5";
    div7.style.zIndex = 1;

    var div8 = document.createElement("div");
    document.getElementById("voteanswer4").appendChild(div8);
    div8.style.position = "absolute";
    div8.style.left = 0;
    div8.style.width = rel4 + "%";
    div8.style.height = "120px";
    div8.style.backgroundColor = "#9fd6f5";
    div8.style.zIndex = 1;
    
    var div9 = document.createElement("div");
    div9.setAttribute("id","firstAdd");
    document.getElementById("voteanswer1").appendChild(div9);
    document.getElementById("firstAdd").innerHTML = "... would vote for Hitler";
    div9.style.fontStyle = "Serif";
    div9.style.fontSize = "16px";
    div9.style.color = "#495159";
    div9.style.position = "absolute";
    div9.style.left = "50%";
    div9.style.backgroundColor = "transparent";
    div9.style.zIndex = 2;

    var div10 = document.createElement("div");
    div10.setAttribute("id","secondAdd");
    document.getElementById("voteanswer2").appendChild(div10);
    document.getElementById("secondAdd").innerHTML = "... are insecure";
    div10.style.fontStyle = "Serif";
    div10.style.fontSize = "16px";
    div10.style.color = "#495159";
    div10.style.position = "absolute";
    div10.style.left = "50%";
    div10.style.backgroundColor = "transparent";
    div10.style.zIndex = 2;

    var div11 = document.createElement("div");
    div11.setAttribute("id","thirdAdd");
    document.getElementById("voteanswer3").appendChild(div11);
    document.getElementById("thirdAdd").innerHTML = "... are quiet rational";
    div11.style.fontStyle = "Serif";
    div11.style.fontSize = "16px";
    div11.style.color = "#495159";
    div11.style.position = "absolute";
    div11.style.left = "50%";
    div11.style.backgroundColor = "transparent";
    div11.style.zIndex = 2;

    
    var div12 = document.createElement("div");
    div12.setAttribute("id","forthAdd");
    document.getElementById("voteanswer4").appendChild(div12);
    document.getElementById("forthAdd").innerHTML = "... write Freedom in CAPS";
    div12.style.fontStyle = "Serif";
    div12.style.fontSize = "16px";
    div12.style.color = "#495159";
    div12.style.position = "absolute";
    div12.style.left = "50%";
    div12.style.backgroundColor = "transparent";
    div12.style.zIndex = 2;
}

function button4() {
    
    clicks4 += 1;
    sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
    onePercent = sumOfVotes / 100;
    rel1 = Math.round((clicks1 / onePercent)*100)/100;
    rel2 = Math.round((clicks2 / onePercent)*100)/100;
    rel3 = Math.round((clicks3 / onePercent)*100)/100;
    rel4 = Math.round((clicks4 / onePercent)*100)/100;

    document.getElementById("voteanswer1").innerHTML = "";
    document.getElementById("voteanswer2").innerHTML = "";
    document.getElementById("voteanswer3").innerHTML = "";
    document.getElementById("voteanswer4").innerHTML = "";

    var div1 = document.createElement("div");
    div1.setAttribute("id","firstResult");
    document.getElementById("voteanswer1").appendChild(div1);
    document.getElementById("firstResult").innerHTML = clicks1 + " votes    " + rel1 + "%";
    div1.style.fontStyle = "Serif";
    div1.style.fontSize = "16px";
    div1.style.color = "#495159";
    div1.style.position = "absolute";
    div1.style.left = "10%";
    div1.style.backgroundColor = "transparent";
    div1.style.zIndex = 2;

    var div2 = document.createElement("div");
    div2.setAttribute("id","secondResult");
    document.getElementById("voteanswer2").appendChild(div2);
    document.getElementById("secondResult").innerHTML = clicks2 + " votes    " + rel2 + "%";
    div2.style.fontStyle = "Serif";
    div2.style.fontSize = "16px";
    div2.style.color = "#495159";
    div2.style.position = "absolute";
    div2.style.left = "10%";
    div2.style.backgroundColor = "transparent";
    div2.style.zIndex = 2;

    var div3 = document.createElement("div");
    div3.setAttribute("id","thirdResult");
    document.getElementById("voteanswer3").appendChild(div3);
    document.getElementById("thirdResult").innerHTML = clicks3 + " votes    " + rel3 + "%";
    div3.style.fontStyle = "Serif";
    div3.style.fontSize = "16px";
    div3.style.color = "#495159";
    div3.style.position = "absolute";
    div3.style.left = "10%";
    div3.style.backgroundColor = "transparent";
    div3.style.zIndex = 2;

    var div4 = document.createElement("div");
    div4.setAttribute("id","forthResult");
    document.getElementById("voteanswer4").appendChild(div4);
    document.getElementById("forthResult").innerHTML = clicks4 + " votes    " + rel4 + "%";
    div4.style.fontStyle = "Serif";
    div4.style.fontSize = "16px";
    div4.style.color = "#495159";
    div4.style.position = "absolute";
    div4.style.left = "10%";
    div4.style.backgroundColor = "transparent";
    div4.style.zIndex = 2;




    var div5 = document.createElement("div");
    document.getElementById("voteanswer1").appendChild(div5);
    div5.style.position = "absolute";
    div5.style.left = 0;
    div5.style.width = rel1 + "%";
    div5.style.height = "120px";
    div5.style.backgroundColor = "#9fd6f5";
    div5.style.zIndex = 1;

    var div6 = document.createElement("div");
    document.getElementById("voteanswer2").appendChild(div6);
    div6.style.position = "absolute";
    div6.style.left = 0;
    div6.style.width = rel2 + "%";
    div6.style.height = "120px";
    div6.style.backgroundColor = "#9fd6f5";
    div6.style.zIndex = 1;

    var div7 = document.createElement("div");
    document.getElementById("voteanswer3").appendChild(div7);
    div7.style.position = "absolute";
    div7.style.left = 0;
    div7.style.width = rel3 + "%";
    div7.style.height = "120px";
    div7.style.backgroundColor = "#9fd6f5";
    div7.style.zIndex = 1;

    var div8 = document.createElement("div");
    document.getElementById("voteanswer4").appendChild(div8);
    div8.style.position = "absolute";
    div8.style.left = 0;
    div8.style.width = rel4 + "%";
    div8.style.height = "120px";
    div8.style.backgroundColor = "#9fd6f5";
    div8.style.zIndex = 1;
    
    var div9 = document.createElement("div");
    div9.setAttribute("id","firstAdd");
    document.getElementById("voteanswer1").appendChild(div9);
    document.getElementById("firstAdd").innerHTML = "... would vote for Hitler";
    div9.style.fontStyle = "Serif";
    div9.style.fontSize = "16px";
    div9.style.color = "#495159";
    div9.style.position = "absolute";
    div9.style.left = "50%";
    div9.style.backgroundColor = "transparent";
    div9.style.zIndex = 2;

    var div10 = document.createElement("div");
    div10.setAttribute("id","secondAdd");
    document.getElementById("voteanswer2").appendChild(div10);
    document.getElementById("secondAdd").innerHTML = "... are insecure";
    div10.style.fontStyle = "Serif";
    div10.style.fontSize = "16px";
    div10.style.color = "#495159";
    div10.style.position = "absolute";
    div10.style.left = "50%";
    div10.style.backgroundColor = "transparent";
    div10.style.zIndex = 2;

    var div11 = document.createElement("div");
    div11.setAttribute("id","thirdAdd");
    document.getElementById("voteanswer3").appendChild(div11);
    document.getElementById("thirdAdd").innerHTML = "... are quiet rational";
    div11.style.fontStyle = "Serif";
    div11.style.fontSize = "16px";
    div11.style.color = "#495159";
    div11.style.position = "absolute";
    div11.style.left = "50%";
    div11.style.backgroundColor = "transparent";
    div11.style.zIndex = 2;

    
    var div12 = document.createElement("div");
    div12.setAttribute("id","forthAdd");
    document.getElementById("voteanswer4").appendChild(div12);
    document.getElementById("forthAdd").innerHTML = "... write Freedom in CAPS";
    div12.style.fontStyle = "Serif";
    div12.style.fontSize = "16px";
    div12.style.color = "#495159";
    div12.style.position = "absolute";
    div12.style.left = "50%";
    div12.style.backgroundColor = "transparent";
    div12.style.zIndex = 2;
}

  

How would you optimize this code ?
It functions the way I want it to, but I made a lot of copy paste.
Is there a way, specifically for the JS part to write it in a shorter way ?

All opinions welcome…

both for css and javascript, you use the same code again and again. Css, use classes for example

javascript, use functions or loops to use the same logic on multiple elements

As an example, you create a lot of <div> elements like this:

    var div1 = document.createElement("div");
    div1.setAttribute("id","firstResult");
    document.getElementById("voteanswer1").appendChild(div1);
    document.getElementById("firstResult").innerHTML = clicks1 + " votes    " + rel1 + "%";
    div1.style.fontStyle = "Serif";
    div1.style.fontSize = "16px";
    div1.style.color = "#495159";
    div1.style.position = "absolute";
    div1.style.left = "10%";
    div1.style.backgroundColor = "transparent";
    div1.style.zIndex = 2;

First, you don’t have to set all those styles with JavaScript, you can just give it a class and style all the <div> elements with one class, so your JS would be:

    var div1 = document.createElement("div");
    div1.setAttribute("id","firstResult");
    document.getElementById("voteanswer1").appendChild(div1);
    document.getElementById("firstResult").innerHTML = clicks1 + " votes    " + rel1 + "%";

    /* delete all the rest and use a class instead: */

    div1.setAttribute("class", "my-div-class")

And the CSS:

.my-div-class {
  font-family:'Serif';
  font-size: 16px;
  color: #495159;

  /* and all the other repeating styles */
}

That would already remove half of your code.


Next, you create a lot of those divs, you could let a function do that for you, where you only pass in the stuff that changes for each div:
function makeDiv(id, parentId, clicks, rel){
  let div = document.createElement("div");
  div.setAttribute("id", id);
  document.getElementById(parendId).appendChild(div);
  div.innerHTML = clicks + " votes   " + rel + "%";
}

And to call the function:

makeDiv("firstResult", "voteanswer1", clicks1, rel1);
makeDiv("secondResult", "voteanswer2", clicks2, rel2);
/* ... */

You could optmise even further, but the above would already make your code about 90% shorter.

1 Like

whow !
that’s already a lot, thx

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.