Javascript 单击时，按钮不会出现在html中_Javascript_Html_Css

Javascript 单击时，按钮不会出现在html中

javascript html css

Javascript 单击时，按钮不会出现在html中,javascript,html,css,Javascript,Html,Css,您好，我正在使用DOM和toggle创建按钮来更改HTML文件中的段落，当您在JavaScript中单击它时。但是，这些按钮没有出现在HTML中，我已经设置好了，所以它位于段落的顶部。我用CSS来设计按钮的样式。以下是JC、HTML和CSS文件： HTML: <!DOCTYPE html> <head> <link scr="stylesheet" type="text/css" href="A3 .css"> <script src

您好，我正在使用DOM和toggle创建按钮来更改HTML文件中的段落，当您在JavaScript中单击它时。但是，这些按钮没有出现在HTML中，我已经设置好了，所以它位于段落的顶部。我用CSS来设计按钮的样式。以下是JC、HTML和CSS文件：

HTML:

<!DOCTYPE html>
<head>
    <link scr="stylesheet" type="text/css" href="A3 .css"> 
    <script src="A3.js"></script>
</head>
<div id ="button_containter"></div>
<body id= target_p>



In considering any new subject, there is frequently a tendency, first, to overrate what we find to be already interesting
    or remarkable; and, secondly, by a sort of natural reaction, to undervalue the blue state of the case, when we do
    discover that our notions have surpassed those that were really tenable

</body>
</html>

CSS:

由于您的代码有很多问题，需要进行一些编辑。容器id有一个输入错误，按钮是用button_容器创建的，它实际上是id等。下面你可以看到按钮是如何创建的

CreateElement:

在createElement中，我们必须指定标记名，而不是ID本身来创建新的html元素。阅读更多

SetAttribute:

对于我们使用的id，它设置指定元素上属性的值。如果该属性已经存在，则更新该值；否则，将添加具有指定名称和值的新属性

btn.setAttribute("id", "button_content"); //Ids,classes and data-attribute
                                          //id="myid", class="myclass", data-myid=1

InnerText:

最后，对于值，我们使用设置按钮的文本并将其称为onLoad

btn.innerText ="Click me";

完整代码：

<!DOCTYPE html>

<html>
<head>
    <title>Website Project</title>

    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
Toggle_bold {
    font: bold;
}

.Toggle_width{
    width: 50%;
}

.Toggle_width{
    color: #ff2800;
}

.Toggle_size{
    font-size: 100%;
}

#button_containter{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
</head>
<body>
<div id ="button_container"></div>



<script>

function createButton (name){
    const btn = document.createElement('button'); //Add button with create Element
    btn.setAttribute("id", "button_content"); //Add Id with setAttribute method
    btn.innerText ="Click me";// Add value of the button with innerText property

    let container = document.getElementById("button_container"); //Fetch container div
    console.log(btn);
    console.log(container);
    container.appendChild(btn); //Append button to it.

}

function makeBold(){
// changing the size to bold, getting it from CSS s
    this.p.classList.toggle("Toggle_bold");
}

function changedWidth(){
    this.p.classList.toggle('Toggle_width');
}

function changeColor(){
    this.p.classList.toggle('Toggle_width');
}

function changeSize(){
    this.p.classList.toggle('Toggle_size');
}

window.onload = () => {
    createButton();// call button function here to create the button
}
</script>

</body>
</html>


网站项目
切换到粗体{
字体：粗体；
}
.切换宽度{
宽度：50%；
}
.切换宽度{
颜色：#ff2800；
}
.切换大小{
字体大小：100%；
}
#按钮式集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
}
函数createButton（名称）{
const btn=document.createElement（'button'）；//使用create元素添加按钮
btn.setAttribute（“id”，“按钮内容”）；//使用setAttribute方法添加id
btn.innerText=“单击我”；//添加具有innerText属性的按钮的值
let container=document.getElementById（“按钮容器”）；//获取容器div
控制台日志（btn）；
控制台日志（容器）；
container.appendChild（btn）；//向其添加按钮。
}
函数makeBold（）{
//将大小更改为粗体，从CSS s获取
这个.p.classList.toggle（“toggle_bold”）；
}
函数changedWidth（）{
this.p.classList.toggle（'toggle_width'）；
}
函数changeColor（）{
this.p.classList.toggle（'toggle_width'）；
}
函数changeSize（）{
this.p.classList.toggle（'toggle_size'）；
}
window.onload=（）=>{
createButton（）；//在此处调用button函数来创建按钮
}

最后，我相信我们在实践中学习，因此我希望这有助于消除一些困惑以及解决您的问题：）。

由于您的代码有很多问题，需要进行一些编辑。容器id有一个输入错误，按钮是用button_容器创建的，它实际上是id等。下面你可以看到按钮是如何创建的

CreateElement:

在createElement中，我们必须指定标记名，而不是ID本身来创建新的html元素。阅读更多

SetAttribute:

对于我们使用的id，它设置指定元素上属性的值。如果该属性已经存在，则更新该值；否则，将添加具有指定名称和值的新属性

btn.setAttribute("id", "button_content"); //Ids,classes and data-attribute
                                          //id="myid", class="myclass", data-myid=1

InnerText:

最后，对于值，我们使用设置按钮的文本并将其称为onLoad

btn.innerText ="Click me";

完整代码：

<!DOCTYPE html>

<html>
<head>
    <title>Website Project</title>

    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
Toggle_bold {
    font: bold;
}

.Toggle_width{
    width: 50%;
}

.Toggle_width{
    color: #ff2800;
}

.Toggle_size{
    font-size: 100%;
}

#button_containter{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
</style>
</head>
<body>
<div id ="button_container"></div>



<script>

function createButton (name){
    const btn = document.createElement('button'); //Add button with create Element
    btn.setAttribute("id", "button_content"); //Add Id with setAttribute method
    btn.innerText ="Click me";// Add value of the button with innerText property

    let container = document.getElementById("button_container"); //Fetch container div
    console.log(btn);
    console.log(container);
    container.appendChild(btn); //Append button to it.

}

function makeBold(){
// changing the size to bold, getting it from CSS s
    this.p.classList.toggle("Toggle_bold");
}

function changedWidth(){
    this.p.classList.toggle('Toggle_width');
}

function changeColor(){
    this.p.classList.toggle('Toggle_width');
}

function changeSize(){
    this.p.classList.toggle('Toggle_size');
}

window.onload = () => {
    createButton();// call button function here to create the button
}
</script>

</body>
</html>


网站项目
切换到粗体{
字体：粗体；
}
.切换宽度{
宽度：50%；
}
.切换宽度{
颜色：#ff2800；
}
.切换大小{
字体大小：100%；
}
#按钮式集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
}
函数createButton（名称）{
const btn=document.createElement（'button'）；//使用create元素添加按钮
btn.setAttribute（“id”，“按钮内容”）；//使用setAttribute方法添加id
btn.innerText=“单击我”；//添加具有innerText属性的按钮的值
let container=document.getElementById（“按钮容器”）；//获取容器div
控制台日志（btn）；
控制台日志（容器）；
container.appendChild（btn）；//向其添加按钮。
}
函数makeBold（）{
//将大小更改为粗体，从CSS s获取
这个.p.classList.toggle（“toggle_bold”）；
}
函数changedWidth（）{
this.p.classList.toggle（'toggle_width'）；
}
函数changeColor（）{
this.p.classList.toggle（'toggle_width'）；
}
函数changeSize（）{
this.p.classList.toggle（'toggle_size'）；
}
window.onload=（）=>{
createButton（）；//在此处调用button函数来创建按钮
}

最后，我相信我们在实践中学习，因此我希望这有助于消除一些困惑以及解决您的问题：）。

JS问题：

首先，当调用

document.createElement（）

时，您无意中传入了容器的名称。相反，您应该传入

button

，如下所示：

constbtn=document.createElement（'button'）
接下来，不需要创建文本节点btn.innerText=name
可以正常工作；）
最后，您意外地在新段落转换器（document.getElementById（'target_p；'）中插入了一个分号
此外，您还将调用放入类中的窗口。onload
；把它移到外面去
CSS问题：
字体：粗体
不起作用，需要使用font-weight:bold
此外，您在Toggle\u bold
选择器中忘记了一个句点。它应该是。Toggle_bold
以选择类
带有最终固定代码的代码笔
我希望这能解决你的问题
 JS问题：
首先，当调用document.createElement（）
时，您无意中传入了容器的名称。相反，您应该传入button
，如下所示：constbtn=document.createElement（'button'）
接下来，不需要创建文本节点btn.innerText=name
可以正常工作；）
最后，你是acc