JavaScript class to modify a paragraph using click handlers

Question

Create a JavaScript class "ModifyParagraph", here constructor accepts paragraph element. inside the constructor, create 4 buttons (which change the paragraph, Bold, color, size, position) using document.createElement and add click event handler on each. Click handler on bold button will turn on/off the boldness.

My code:

HTML



    
        Question-2
        
        
        
    
    
            Lorem ipsum dolor sit amet, porttitor ut donec ut egestas, purus urna consectetuer, arcu et vitae elementum nulla etiam in, sit leo lacus. Ligula cras tortor dignissim laoreet ut, nonummy hendrerit mauris, vitae augue congue congue, vel et augue, eros at. Fringilla id donec libero mauris eleifend. Nulla nunc sit. Consequat sodales placerat faucibus mauris, urna lectus vitae, sit nisl laoreet libero at suscipit ut, neque laoreet dapibus sapien. Sodales sit ut metus commodo tellus, ultricies cursus, et faucibus vitae quam, sit ultrices rhoncus. Massa duis mauris arcu vulputate, iste orci porttitor a ac, quisque venenatis pellentesque in in velit sed, repellat lorem consectetur vero, urna tellus donec. Suscipit in, donec beatae, lectus bibendum morbi justo consectetuer ac, facilisis metus vel non sapien vel. Magna congue vitae quia nulla nulla, lorem enim urna augue et et, sem morbi lorem ornare velit neque morbi, erat id et blandit iaculis.

JavaScript

class ModifyParagraph{
    constructor(myDIV){
        this.myDIV = myDIV;
    function myFunction(){
        var btn = document.createElement("BUTTON");
        var bold = document.getElementById(myDIV);
        btn.addEventListener('click', function(){
            if (bold.style['font-weight']) {
                bold.style.removeProperty('font-weight');
              } else {
                bold.style['font-weight'] = "800";
              }
          }
        }
    }
}

In my code, I have a problem in creating a button inside the constructor and adding click handlers on each button. Please let me know how to proceed

ThS · Accepted Answer

Apart from your syntax mistakes(I'll cover them later in the answer), your main issue is that you missed to append the created button to the DOM.

Here's a working demo:

class ModifyParagraph {
  constructor(div) {
    this.myDIV = div;
  }
  toggleBoldStyle() {
    // create the button.
    var btn = document.createElement('button');
    // give it some text/value.
    btn.textContent = 'toggle Bold styling';
    // add click event listener to the button.
    btn.addEventListener('click', function() {
      // if the font-weight is 800 make it 'normal' else if it's other than 800 make it 800'
      // add the 'this' keyword in the addEventListener method references the button, to get the member myDIV we'll just call it without preceding it by 'this'(myDIV in place of this.myDIV).
      myDIV.style.fontWeight = (myDIV.style.fontWeight === '800') ? 'normal':'800';
    });
    // append the button to the DOM
    this.myDIV.appendChild(btn);
  }
}
// testing...
var p = new ModifyParagraph(document.getElementById('myDIV'));
p.toggleBoldStyle();

Lorem ipsum dolor sit amet, porttitor ut donec ut egestas, purus urna consectetuer, arcu et vitae elementum nulla etiam in, sit leo lacus. Ligula cras tortor dignissim laoreet ut, nonummy hendrerit mauris, vitae augue congue congue, vel et augue, eros at. Fringilla id donec libero mauris eleifend. Nulla nunc sit. Consequat sodales placerat faucibus mauris, urna lectus vitae, sit nisl laoreet libero at suscipit ut, neque laoreet dapibus sapien. Sodales sit ut metus commodo tellus, ultricies cursus, et faucibus vitae quam, sit ultrices rhoncus. Massa duis mauris arcu vulputate, iste orci porttitor a ac, quisque venenatis pellentesque in in velit sed, repellat lorem consectetur vero, urna tellus donec. Suscipit in, donec beatae, lectus bibendum morbi justo consectetuer ac, facilisis metus vel non sapien vel. Magna congue vitae quia nulla nulla, lorem enim urna augue et et, sem morbi lorem ornare velit neque morbi, erat id et blandit iaculis.

Apart from missing to append the button to the DOM, you had some mistakes:

Class methods doesn't require the 'function' keyword, you have to just write the method name.
You missed a closing parenthesis of the addEventListener method.
Why you're trying to get the element that you just saaved in the muyDIV member. Better, you have two choices: send the element itself to the constructor or send it's ID and in the assignment to the myDIV member you fetch the element by the getElementById method. In my demo I sent the element itself to the constructor. But, you can make things more complicated to allow sending the ID or the element itself possible, innthe constructor you have to check the type of the incoming argument.

Finally, here's the link of the MDN documentation of the ECMAScript 5 classes.

Hope I pushed you further.

JavaScript class to modify a paragraph using click handlers

Answers (2)

Related Questions