CODEWITHSUNDEEP
javascripthtmlcss
loksan
loksan

Reputation: 177

Contenteditable paragraphs in html

I am creating a contenteditable paragraph in html. I have a button which on clicking will make the text bold. The first time it is clicked the text should change to bold,and the next time it is clicked ,the text should be normal(not bolder).This is similar to the Stack overflow question editor.html code:

    <button type="button" id="bold" onclick="bold()">B</button>
    <div id="content">
       <p id="hey" contenteditable="true">Hi how are you</p>
    </div>

JS:

        let boldClick=0;
        let p=document.getElementById('hey');
        function bold(){
           if(boldClick%2==0){ 

             p.innerHTML=p.innerHTML+' <span contenteditable="true">'+' boldtext'+'</span>';
           }
           else{
              let pNew=document.createElement('p');
              pNew.setAttribute("contenteditable","true");
              document.getElementById('content').appendChild(pNew);
           }
           boldClick++;
        }

CSS:

        #bold{
            font-weight: bold;
        }
        span{
            font-weight: bold;
            background-color: grey;
        }
        p{
            display: inline;
        }

I can make the text bolder by clicking the button.Bolder texts must be inside the span element and non-bolder texts must be outside span but inside p element.How do I solve it?

Upvotes: 1

Views: 384

Answers (3)

CanUver
CanUver

Reputation: 1774

the shortest way. Create a class named Bold. Add the properties you want to this class. Select elements with Javascript and assign a function to have this class. In general , creating a class with css and using javascript is the simplest way to solve problems, which element of this class should be added when.

let clicked = false;

function bold() {
  let paragraph = document.getElementById("paragraph");
  let span = document.getElementById("span");

  if (clicked) {
    span.contentEditable = false;
    span.classList.remove("bold");
    clicked = false;
  } else {
    span.contentEditable = true;
    span.classList.add("bold");
    clicked = true;
  }
}
p {
  display: inline;
}

.bold {
  font-weight: bold;
}
<button type="button" id="bold-button" onclick="bold()">B</button>
<div id="content">
  <p id="paragraph">Hi how are you
    <span id="span">how are you</span>
  </p>
</div>

Upvotes: 1

Akash Jain
Akash Jain

Reputation: 730

approach 1:

    let boldClick=0;
    let p=document.getElementById('hey');
    p.innerHTML=p.innerHTML+' <span contenteditable="true" id="bold">'+' boldtext'+'</span>';
     const boldTag = document.getElementById('bold');
    function bold(){
       if(boldClick%2==0){ 
      boldTag.style.fontWeight="";
       }
       else{
         boldTag.style.fontWeigh="bold";
       }
       boldClick++;
    }

approach 2:

    let boldClick=0;
    let p=document.getElementById('hey');
    p.innerHTML=p.innerHTML+' <span contenteditable="true" id="bold">'+' boldtext'+'</span>';
     const boldTag = document.getElementById('bold');
    function bold(){
       if(boldClick%2==0){ 
      boldTag.id="";
       }
       else{
         boldTag.id="bold";
       }
       boldClick++;
    }

these approaches are not optimized , but hope you get the concept .

Upvotes: 2

Callum S
Callum S

Reputation: 221

First off, please tag your post with java script instead of java, similar name, different language. Here is the code you should use:

let isBold = false;
let p=document.getElementById('hey');

function bold(){
    if(isBold == false){ 
        p.style.fontWeight = "bold";
        isBold = true;
    }
    else{
        p.style.fontWeight = "normal";
        isBold = false;
    }
}

It changes the font weight (if it is bold or not) instead of the complex code you had. If you are just turning something on and off (bold or not) then use a boolean value (true + false) true will make it bold, false will make it normal. For HTML graphics, you should use CSS language. You can change the variable's CSS values by saying style then the thing you want to change.

Upvotes: 0

Related Questions