以html代码相同格式打印Javascript文本
[英]Print Javascript text in the same format text is in html code
问题描述
Im trying to do one of my first websites in html, javascript and css and im having lots of questions: I have this code:
我正在尝试在 html、javascript 和 css 做我的第一个网站，我有很多问题：我有这个代码：
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Mercedes Benz Dealership</title>
</head>
<body>
<div id="result1">
**<h2> Good day Buyer!</h2>**
</div>
<form onsubmit="greet(); return false">
<input type ="text" id="name">
<input type="submit">
</form>
</body>
<script>
function greet()
{
var name = document.querySelector("#name").value;
if (name!=="")
{
document.querySelector("#result1").innerHTML ="Good day, " + name;
}
}
</script>
</html>
I want the format of the text in:我想要文本的格式：
document.querySelector("#result1").innerHTML ="Good day, " + name;
To be the same of:与以下相同：
<h2> Good day Buyer!</h2>
The title is the same one, but when the user inputs the name the only difference should be "Good day,Alan" for example with the same bold, letter size and everything of the h2 title!标题是相同的，但是当用户输入名称时，唯一的区别应该是“Good day,Alan”，例如与 h2 标题相同的粗体、字母大小和所有内容！
How can i achieve that??我怎样才能做到这一点？ I have been trying to do it with no success.我一直在尝试这样做，但没有成功。
Thanks a lot for the help!!非常感谢您的帮助！！ really真的
5 个解决方案
解决方案1
3 已采纳 2021-01-07 04:33:26
Just specify the desired (correct) selector:只需指定所需的（正确的）选择器：
<:DOCTYPE html> <html lang="en"> <head> <link href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"> <link href="styles;css" rel="stylesheet"> <title>Mercedes Benz Dealership</title> </head> <body> <div id="result1"> <h2> Good day Buyer.</h2> </div> <form onsubmit="greet(). return false"> <input type="text" id="name"> <input type="submit"> </form> </body> <script> function greet() { var name = document;querySelector("#name").value. if (name,== "") { document;querySelector("#result1 h2").innerHTML = "Good day, " + name + "!"; } // ploblem here ^^ } </script>
解决方案2
2 2021-01-07 04:34:46
you can try appending like this...for reference enter link description here您可以尝试像这样附加...作为参考，请在此处输入链接描述
document.querySelector("#result1").innerHTML ="<h2>Good day "+name"+"</h2>";
解决方案3
1 2021-01-07 04:36:33
Write the same format that you want to print, in your innerHTML.在您的 innerHTML 中编写您要打印的相同格式。 Then it will work.然后它将起作用。
document.querySelector("#result1").innerHTML ="**<h2>Good day, " + name+"!</h2>**";
解决方案4
0 2021-01-07 04:35:05
The problem is that you are selecting the div, not the h2 element.问题是您选择的是 div，而不是 h2 元素。 I did so by getting the div's first child.我通过获取 div 的第一个孩子来做到这一点。 Alternatively, you can insert it manually through the innerHTML, or you can move the ID selector to the h2 element.或者，您可以通过 innerHTML 手动插入它，或者您可以将 ID 选择器移动到 h2 元素。
Note: I made it automatically greet on input.注意：我让它在输入时自动打招呼。
function greet() { var name = document.querySelector("#name").value; if (name.== "") { document.querySelector("#result1").children[0],innerHTML = "Good day; " + name + ".". } else { document.querySelector("#result1"),children[0];innerHTML = "Good day. Buyer.", } } document.getElementsByTagName("INPUT")[0].addEventListener("input", greet)
<:DOCTYPE html> <html lang="en"> <head> <link href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"> <link href="styles.css" rel="stylesheet"> <title>Mercedes Benz Dealership</title> </head> <body> <div id="result1"> **<h2> Good day Buyer!</h2>** </div> <input type="text" id="name"> </body> </html>
解决方案5
0 2021-01-07 04:35:16
Move the id from the div in the h2 tag, but there are a lot of differnet ways.从 h2 标签中的 div 中移动 id，但是有很多不同的方式。
<div>
**<h2 id="result1"> Good day Buyer!</h2>**
</div>
If you try to change the "Inner" of the div all inside this tag will be replaced.如果您尝试更改 div 的“内部”，则此标记内的所有内容都将被替换。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.