Кнопки не появляются в html при клике - PullRequest
Новая
       0

Кнопки не появляются в html при клике

1 голос
/ 21 марта 2020

Добрый день, я создаю кнопки, используя DOM, и переключаюсь, чтобы изменить абзац в файле HTML, когда вы нажимаете его в JavaScript, однако кнопки не отображаются в html, и я установил это так, что он находится в верхней части абзаца. Я использовал CSS для стилизации кнопок. Вот файлы J C, 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>

JS: 

let para = document.getElementById("target_p");

class ParagraphChanger  {

constructor (p){
    this.p=p; 

var btnDiv = document.getElementById("button_containter"); 
let  btnBold = this.createButton("toggle bold"); 
btnBold.addEventListener('click',() => this.makeBold()); 
btnDiv.appendChild(btnBold); 

let widthBtn = this.createButton("toggle width");
widthBtn.addEventListener('click', () => this.changedWidth()); 
btnDiv.appendChild(widthBtn);

let clrBtn = this.createButton("togglt color");
clrBtn.addEventListener('click', () => this.changeColor()); 
clrBtn.appendChild(clrBtn);

let szBtn = this.createButton("toggle size");
szBtn.addEventListener('click', () => this.changeSize());
}
    createButton (name){
        const btn = document.createElement('button_container');
        const buttonName = document.createTextNode(name);
        buttonName.appendChild(buttonName); 

        return btn; 
    }

    makeBold(){
    // changing the size to bold, getting it from CSS s
        this.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 = () => {
        new ParagraphChanger(document.getElementById('target_p;'));
    }
    };

CSS: 

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

Ответы [ 2 ]

2 голосов
/ 21 марта 2020

JS выдает:

Во-первых, когда вы звоните document.createElement(), вы случайно передаете имя контейнера. Вместо этого вы должны передать button, например: const btn = document.createElement('button');

Далее вам не нужно создавать текстовый узел. btn.innerText = name будет работать просто отлично;)

Наконец, вы случайно вставили точку с запятой в new ParagraphChanger(document.getElementById('target_p;'));.

Также вы положили вызов на window.onload внутри класс; переместите его наружу!

CSS проблемы:

font: bold; не будет работать, вам нужно использовать font-weight: bold;

Также, вы забыли точку в вашем Toggle_bold селекторе. Для выбора класса должно быть .Toggle_bold.

Вот CodePen с вашим окончательным, фиксированным кодом.

Надеюсь, это решит вашу проблему!

1 голос
/ 21 марта 2020

Немного отредактировал, так как в вашем коде было много проблем. У идентификатора контейнера была опечатка, кнопка была создана с помощью button_container, который на самом деле является идентификатором et c. Ниже вы можете увидеть, как создается кнопка.

CreateElement:

В createElement мы должны указать имя тега, а не сам идентификатор создаваемого нового элемента html. Подробнее здесь . 

document.createElement('button');  //p tag, h1,h2,h3 tags etc, divs

SetAttribute:

Для идентификатора мы используем setAttribute , который устанавливает значение атрибут указанного элемента. Если атрибут уже существует, значение обновляется; в противном случае добавляется новый атрибут с указанным именем и значением. 

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

InnerText:

Наконец, для значения мы используем 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>

Наконец, я считаю, что мы учимся на практике, и поэтому я надеюсь, что это помогло очистить некоторые из путаницы, а также решение вашей проблемы:).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...