How can i dynamically create a button?

Question

My goal is to dynamically create a button to compare the answers with the solutions. Wrong answers will turn red, right answers will turn green. My problem is, when I click on the button, nothing happens.

Json-File:

[
  {
    "question1": 1,
    "question": "What color has the apple?",
    "answer" : ["purple", "Yellow", "Red"],
    "solution": [2]
  }

 {
    "question2": 2,
    "question": "What color has the Banana?",
    "answer" : ["Yellow", "Black", "Green"],
    "solution": [0]
  }

  {
    "question3": 3,
    "question": "What color has the Lemon?",
    "answer" : ["Red", "White", "Yellow"],
    "solution": [2]
  }






var answers = {
0: "1",
1: "0,1,2",
2: "0",
3: "0",
4: "0",
5: "1",
6: "2",
7: "0"
};

var solutions = {
0: "",
1: "",
2: "",
3: "",
4: "",
5: "",
6: "",
7: ""
};

var button = document.createElement("input");
var buttonAttribute = document.createAttribute("type");
var butttonAttribute1 = document.createAttribute("value");
var buttonId = document.createAttribute("id");


button.setAttributeNode(buttonId);
button.setAttributeNode(buttonAttribute);
button.setAttributeNode(butttonAttribute1);


buttonAttribute.value = "button";
butttonAttribute1.value = "Evaluation";
buttonId.value = "button";


document.body.appendChild(button);


buttonId.addEventListener("click", function() {


  for (let i = 0; i < json.length; i++) {

    if (answers[i] != solutions[i]) {
      var style = document.createElement("style");
      style.value = "color: red";

      paragraph.setAttributeNode(style);

    


    }
    if (answers[i] == solutions[i]) {
      var style = document.createAttribute("style");
      style.value = "color: green";

      paragraph.setAttributeNode(style);
    }
  }


});