Javascript html中的内容可编辑段落

我正在用html创建一个内容可编辑的段落。我有一个按钮，点击会使文本加粗。第一次单击时，文本应更改为粗体，下一次单击时，文本应为普通文本（而不是更粗体）。这类似于堆栈溢出问题编辑器.html代码：

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

我可以通过单击按钮使文本更粗体。粗体文本必须在span元素内，非粗体文本必须在span元素外，但在元素内

---

p元素。如何解决它

最短的路。创建一个名为Bold的类。将您想要的属性添加到此类。使用Javascript选择元素并分配一个函数来拥有这个类。 一般来说，用css和javascript创建一个类是解决问题的最简单的方法，在创建时应该添加这个类的哪个元素

let clicked=false；
函数bold（）{
让段落=document.getElementById（“段落”）；
设span=document.getElementById（“span”）；
如果（单击）{
span.contentEditable=false；
span.classList.remove（“粗体”）；
单击=假；
}否则{
span.contentEditable=true；
span.classList.add（“粗体”）；
单击=真；
}
}

p{
显示：内联；
}
.bold{
字体大小：粗体；
}

B
你好，你好吗
你好吗

最短路径。创建一个名为Bold的类。将您想要的属性添加到此类。使用Javascript选择元素并分配一个函数来拥有这个类。 一般来说，用css和javascript创建一个类是解决问题的最简单的方法，在创建时应该添加这个类的哪个元素

let clicked=false；
函数bold（）{
让段落=document.getElementById（“段落”）；
设span=document.getElementById（“span”）；
如果（单击）{
span.contentEditable=false；
span.classList.remove（“粗体”）；
单击=假；
}否则{
span.contentEditable=true；
span.classList.add（“粗体”）；
单击=真；
}
}

p{
显示：内联；
}
.bold{
字体大小：粗体；
}

B
你好，你好吗
你好吗

首先，请用java脚本而不是java、相似的名称、不同的语言标记您的文章。以下是您应该使用的代码：

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;
    }
}

---

它会更改字体的大小（如果是粗体或非粗体），而不是原来的复杂代码。如果您只是打开或关闭某个对象（粗体或非粗体），则使用布尔值（真+假）真将使其粗体，假将使其正常。对于HTML图形，应该使用CSS语言。您可以通过说出style然后说出您想要更改的内容来更改变量的CSS值。

首先，请使用java脚本而不是java、类似名称、不同语言标记您的帖子。以下是您应该使用的代码：

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;
    }
}

---

它会更改字体的大小（如果是粗体或非粗体），而不是原来的复杂代码。如果您只是打开或关闭某个对象（粗体或非粗体），则使用布尔值（真+假）真将使其粗体，假将使其正常。对于HTML图形，应该使用CSS语言。您可以更改变量的CSS值，方法是先说style，然后说要更改的内容。

方法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++;
    }

    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++;
    }

让boldClick=0；
设p=document.getElementById（'hey'）；
p、 innerHTML=p.innerHTML++'+'黑体文本'+''；
const boldTag=document.getElementById（'bold'）；
函数bold（）{
如果（粗体单击%2==0）{
boldTag.style.fontwweight=“”；
}
否则{
boldTag.style.fontweal=“bold”；
}
粗体单击++；
}

方法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.style.fontWeight="";
       }
       else{
         boldTag.style.fontWeigh="bold";
       }
       boldClick++;
    }

    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++;
    }

让boldClick=0；
设p=document.getElementById（'hey'）；
p、 innerHTML=p.innerHTML++'+'黑体文本'+''；
const boldTag=document.getElementById（'bold'）；
函数bold（）{
如果（粗体单击%2==0）{
boldTag.id=“”；
}
否则{
boldTag.id=“bold”；
}
粗体单击++；
}

---

这些方法都没有经过优化，但希望您能理解它的概念。

方法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++;
    }

    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++;
    }

让boldClick=0；
设p=document.getElementById（'hey'）；
p、 innerHTML=p.innerHTML++'+'黑体文本'+''；
const boldTag=document.getElementById（'bold'）；
函数bold（）{
如果（粗体单击%2==0）{
boldTag.style.fontwweight=“”；
}
否则{
boldTag.style.fontweal=“bold”；
}
粗体单击++；
}

方法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.style.fontWeight="";
       }
       else{
         boldTag.style.fontWeigh="bold";
       }
       boldClick++;
    }

    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++;
    }

让boldClick=0；
设p=document.getElementById（'hey'）；
p、 innerHTML=p.innerHTML++'+'黑体文本'+''；
const boldTag=document.getElementById（'bold'）；
函数bold（）{
如果（粗体单击%2==0）{
boldTag.id=“”；
}
否则{
boldTag.id=“bold”；
}
粗体单击++；
}

---

这些方法并没有经过优化，但希望您能理解这一概念。

在奇数单击时更改

字体的重量

，或者在偶数单击和奇数单击时添加一个类删除span元素中较粗体的文本，而非粗体的文本应在

元素之外，但在

元素内部。那么，更改span元素的css或添加/删除span元素的类您可以用答案解释吗？更改

font-weight

在奇数单击时，或者在偶数点击和奇数点击时添加一个类，删除span元素中较粗体的文本，而非粗体的文本应该在

元素之外，但在

元素内部。那么，更改span元素的css或span元素的添加/删除类，您可以用答案解释吗？这实际上会使整个段落元素加粗。但我希望一个特定的文本单独加粗，这就是为什么我添加了span元素啊，好的，所以你想将粗体单击更改为bool值，并将if语句更改为使用bool语句