英文:
Doesn't show both style and class when added div to my HTML using JS
问题
以下是您要翻译的内容：
"Doesn't show both style and class in console when added div to my HTML using JS, also bootstrap classes don't work,
Here is the code for main_page:
<?php
require "connection.php";?>
<html>
<head>
<link rel = "stylesheet" href = "css/bootstrap.min.css" />
<link rel = "stylesheet" href = "css/style.css" />
</head>
<body>
<header>
<?php require "header.php"; ?>
</header>
<main>
<?php require "main_content.php"; ?>
</main>
<footer>
<?php ?>
</footer>
</body>
<script src = "js/change_avatar_settings.js"></script>
<script src = "js/jQuery.js"></script>
<script src = "js/bootstrap.bundle.min.js"></script>
</html>
Here is the code for main_content.php:
<main class = "container mt-5">
<div class = "display-none" id = "change_display">
<div id = "change_avatar" class = "container">
</div>
</div>
</main>
Here is the JS code called from onclick function (which is in header) (no problem from calling a function), the problem is in that both class - "armen" and style doesn't work in my html, but div with form is created without any issues.
function changeAvatar() {
document.getElementById('change_avatar').innerHTML += '<div class = "armen" style = "width:500px;height:500px;"><form action="" method="post" enctype="multipart/form-data"><input type="file" name="image"><input type="submit" value="Upload Image" name="avatar_btn"><input type="submit" value="Delete Image" name="del_avatar_btn"></form></div>'
}
英文:
Doesn't show both style and class in console when added div to my HTML using JS, also bootstrap classes don't work,
Here is the code for main_page:
<?php
require "connection.php";?>
<html>
<head>
<link rel = "stylesheet" href = "css/bootstrap.min.css" />
<link rel = "stylesheet" href = "css/style.css" />
</head>
<body>
<header>
<?php require "header.php"; ?>
</header>
<main>
<?php require "main_content.php"; ?>
</main>
<footer>
<?php ?>
</footer>
</body>
<script src = "js/change_avatar_settings.js"></script>
<script src = "js/jQuery.js"></script>
<script src = "js/bootstrap.bundle.min.js"></script>
</html>
Here is the code for main_content.php:
<main class = "container mt-5">
<div class = "display-none" id = "change_display">
<div id = "change_avatar" class = "container">
</div>
</div>
</main>
Here is the JS code called from onclick function (which is in header) (no problem from calling a function), the problem is in that both class - "armen" and style doesn't work in my html, but div with form is created without any issues.
function changeAvatar() {
document.getElementById('change_avatar').innerHTML += '<div class = "armen" style = "width:500px;height:500px;"><form action="" method="post" enctype="multipart/form-data"><input type="file" name="image"><input type="submit" value="Upload Image" name="avatar_btn"><input type="submit" value="Delete Image" name="del_avatar_btn"></form></div>'
}
答案1
得分: 0
你的代码在调用函数时似乎运行良好。已添加class和style，如我在其周围放置的红色边框所示，通过该类选择并显示height和width已设置。
英文:
Your code seems to work just fine when I call the function. The class and style are added which is shown by the red border I put around it which selects by that class and shows that the height and width are set on it.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function changeAvatar(){
document.getElementById('change_avatar').innerHTML += `
<div class = "armen" style = "width:500px;height:500px;">
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="image">
<input type="submit" value="Upload Image" name="avatar_btn">
<input type="submit" value="Delete Image" name="del_avatar_btn">
</form>
</div>`
}
changeAvatar();
<!-- language: lang-css -->
.armen {
border: 1px solid red;
}
<!-- language: lang-html -->
<div id="change_avatar" class="container"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论