JavaScript系列教材（十）- 语言基础

JavaScript系列教材（九）- 语言基础 - 阶段性练习1

JavaScript系列教材（十一）- 语言基础 - 作用域

工具版本兼容问题

步骤 1 : 练习-黄鹤
步骤 2 : 答案-黄鹤
步骤 3 : 答案-黄鹤

步骤 1 :

练习-黄鹤

edit 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

参考练习-黄鹤的界面，使用javascript做出一个相同的功能出来

运行效果

<html> <script> function generate(){ var location = $("location"); var companyType= $("companyType"); var companyName= $("companyName"); var bossName= $("bossName"); var money= $("money"); var product= $("product"); var unit= $("unit"); var result = location +"最大"+companyType+companyName+"倒闭了，王八蛋老板"+bossName+"吃喝嫖赌，欠下了"+money+"个亿，" + "带着他的小姨子跑了!我们没有办法，拿着"+product+"抵工资!原价都是一"+unit+"多、两"+unit+"多、三"+unit+"多的"+product+"，" + "现在全部只卖二十块，统统只要二十块!"+bossName+"王八蛋，你不是人!我们辛辛苦苦给你干了大半年，" + "你不发工资，你还我血汗钱，还我血汗钱!"; document.getElementById("result").value=result; } function $(id){ var value = document.getElementById(id).value; return value; } </script> <style> body{ font-family: 宋体; } span{ display:inline-block; border: 1px solid lightgray; width:120px; margin-bottom:5px; } button#generate{ width:80px; height:30px; } textarea{ width:100%; height:150px; margin-top:20px; } </style> <body> <span>地名:</span> <input type="text" id ="location" value="浙江"> <span>公司类型:</span> <input type="text" id ="companyType" value="互联网公司"> <br> <span>公司名称:</span> <input type="text" id ="companyName" value="阿里九九"> <span>老板姓名:</span> <input type="text" id ="bossName" value="牛风"> <br> <span>money:</span> <input type="text" id ="money" value="一万"> <span>产品:</span> <input type="text" id ="product" value="贴膜"> <br> <span>价格计量单位:</span> <input type="text" id ="unit" value="百"> <br> <div align="center"> <button id="generate" onclick="generate()">生成</button> <br> <textarea id="result">浙江最大互联网公司阿里九九倒闭了，王八蛋老板牛风吃喝嫖赌，欠下了一万个亿，带着他的小姨子跑了!我们没有办法，拿着贴膜抵工资!原价都是一百多、两百多、三百多的贴膜，现在全部只卖二十块，统统只要二十块!牛风王八蛋，你不是人!我们辛辛苦苦给你干了大半年，你不发工资，你还我血汗钱，还我血汗钱!</textarea> </div> <br> </body> </html>

代码行数较多，请点击查看

<html>
<script>
function generate(){
   var location = $("location");
   var companyType= $("companyType");
   var companyName= $("companyName");
   var bossName= $("bossName");
   var money= $("money");
   var product= $("product");
   var unit= $("unit");

   var result  = location +"最大"+companyType+companyName+"倒闭了，王八蛋老板"+bossName+"吃喝嫖赌，欠下了"+money+"个亿，"
                            + "带着他的小姨子跑了!我们没有办法，拿着"+product+"抵工资!原价都是一"+unit+"多、两"+unit+"多、三"+unit+"多的"+product+"，"
                            + "现在全部只卖二十块，统统只要二十块!"+bossName+"王八蛋，你不是人!我们辛辛苦苦给你干了大半年，"
                            + "你不发工资，你还我血汗钱，还我血汗钱!";    

   document.getElementById("result").value=result;   

}

function $(id){
   var value = document.getElementById(id).value;
   return value;
}

</script>

<style>
body{
   font-family: 宋体;
}
span{
   display:inline-block; 
   border: 1px solid lightgray;
   width:120px;
   margin-bottom:5px;
}

button#generate{
   width:80px;
   height:30px;
}

textarea{
     width:100%;
     height:150px;
     margin-top:20px;
}

</style>

<body>
<span>地名:</span> <input type="text" id ="location"  value="浙江">
<span>公司类型:</span> <input type="text" id ="companyType"  value="互联网公司">
<br>
<span>公司名称:</span> <input type="text" id ="companyName" value="阿里九九">
<span>老板姓名:</span> <input type="text" id ="bossName" value="牛风">
<br>
<span>money:</span> <input type="text" id ="money" value="一万">
<span>产品:</span> <input type="text" id ="product" value="贴膜">
<br>
<span>价格计量单位:</span> <input type="text" id ="unit" value="百">

<br>
<div align="center">
<button id="generate" onclick="generate()">生成</button>
<br>
<textarea id="result">浙江最大互联网公司阿里九九倒闭了，王八蛋老板牛风吃喝嫖赌，欠下了一万个亿，带着他的小姨子跑了!我们没有办法，拿着贴膜抵工资!原价都是一百多、两百多、三百多的贴膜，现在全部只卖二十块，统统只要二十块!牛风王八蛋，你不是人!我们辛辛苦苦给你干了大半年，你不发工资，你还我血汗钱，还我血汗钱!</textarea>
</div>

<br>

</body>
</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

var result  = location +"最大"+companyType+companyName+"倒闭了，王八蛋老板"+bossName+"吃喝嫖赌，欠下了"+money+"个亿，"
                            + "带着他的小姨子跑了!我们没有办法，拿着"+product+"抵工资!原价都是一"+unit+"多、两"+unit+"多、三"+unit+"多的"+product+"，"
                            + "现在全部只卖二十块，统统只要二十块!"+bossName+"王八蛋，你不是人!我们辛辛苦苦给你干了大半年，"
                            + "你不发工资，你还我血汗钱，还我血汗钱!";

document.getElementById("result").value=result;

}

function $(id){
   var value = document.getElementById(id).value;
   return value;
}

</script>

button#generate{
   width:80px;
   height:30px;
}

textarea{
     width:100%;
     height:150px;
     margin-top:20px;
}

</style>

<body>
<span>地名:</span> <input type="text" id ="location"  value="浙江">
<span>公司类型:</span> <input type="text" id ="companyType"  value="互联网公司">
<br>
<span>公司名称:</span> <input type="text" id ="companyName" value="阿里九九">
<span>老板姓名:</span> <input type="text" id ="bossName" value="牛风">
<br>
<span>money:</span> <input type="text" id ="money" value="一万">
<span>产品:</span> <input type="text" id ="product" value="贴膜">
<br>
<span>价格计量单位:</span> <input type="text" id ="unit" value="百">

<br>
<div align="center">
<button id="generate" onclick="generate()">生成</button>
<br>
<textarea id="result">浙江最大互联网公司阿里九九倒闭了，王八蛋老板牛风吃喝嫖赌，欠下了一万个亿，带着他的小姨子跑了!我们没有办法，拿着贴膜抵工资!原价都是一百多、两百多、三百多的贴膜，现在全部只卖二十块，统统只要二十块!牛风王八蛋，你不是人!我们辛辛苦苦给你干了大半年，你不发工资，你还我血汗钱，还我血汗钱!</textarea>
</div>

<br>

</body>
</html>

渲染中渲染完成

效果

步骤 2 :

答案-黄鹤

edit 顶折

纠问

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

查看本答案会花费3个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

仅仅是界面部分，没有交互

运行效果

代码行数较多，请点击查看

<html>
<script>

</script>

<style>
body{
   font-family: 宋体;
}
span{
   display:inline-block; 
   display-style:box;
   border: 1px solid lightgray;
   width:120px;
   margin-bottom:5px;
}

button#generate{
   width:80px;
   height:30px;
}

textarea{
     width:100%;
     height:150px;
     margin-top:20px;
}

</style>

<body>
<span>地名:</span> <input type="text" id ="location" >
<span>公司类型:</span> <input type="text" id ="companyType" >
<br>
<span>公司名称:</span> <input type="text" id ="companyName" >
<span>老板姓名:</span> <input type="text" id ="bossName" >
<br>
<span>money:</span> <input type="text" id ="money" >
<span>产品:</span> <input type="text" id ="product" >
<br>
<span>价格计量单位:</span> <input type="text" id ="unit" >

<br>
<div align="center">
<button id="generate">生成</button>
<br>
<textarea id="result"></textarea>
</div>

<br>

</body>
</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 3 :

答案-黄鹤

edit 顶折

纠问

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

查看本答案会花费3个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

功能部分

运行效果

代码行数较多，请点击查看

<html>
<script>
function generate(){
   var location = $("location");
   var companyType= $("companyType");
   var companyName= $("companyName");
   var bossName= $("bossName");
   var money= $("money");
   var product= $("product");
   var unit= $("unit");

   var result  = location +"最大"+companyType+companyName+"倒闭了，王八蛋老板"+bossName+"吃喝嫖赌，欠下了"+money+"个亿，"
                            + "带着他的小姨子跑了!我们没有办法，拿着"+product+"抵工资!原价都是一"+unit+"多、两"+unit+"多、三"+unit+"多的"+product+"，"
                            + "现在全部只卖二十块，统统只要二十块!"+bossName+"王八蛋，你不是人!我们辛辛苦苦给你干了大半年，"
                            + "你不发工资，你还我血汗钱，还我血汗钱!";    

   document.getElementById("result").value=result;   

}

function $(id){
   var value = document.getElementById(id).value;
   return value;
}

</script>

<style>
body{
   font-family: 宋体;
}
span{
   display:inline-block; 
   border: 1px solid lightgray;
   width:120px;
   margin-bottom:5px;
}

button#generate{
   width:80px;
   height:30px;
}

textarea{
     width:100%;
     height:150px;
     margin-top:20px;
}

</style>

<body>
<span>地名:</span> <input type="text" id ="location" >
<span>公司类型:</span> <input type="text" id ="companyType" >
<br>
<span>公司名称:</span> <input type="text" id ="companyName" >
<span>老板姓名:</span> <input type="text" id ="bossName" >
<br>
<span>money:</span> <input type="text" id ="money" >
<span>产品:</span> <input type="text" id ="product" >
<br>
<span>价格计量单位:</span> <input type="text" id ="unit" >

<br>
<div align="center">
<button id="generate" onclick="generate()">生成</button>
<br>
<textarea id="result"></textarea>
</div>

<br>

</body>
</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

document.getElementById("result").value=result;

}

function $(id){
   var value = document.getElementById(id).value;
   return value;
}

</script>

button#generate{
   width:80px;
   height:30px;
}

textarea{
     width:100%;
     height:150px;
     margin-top:20px;
}

</style>

<body>
<span>地名:</span> <input type="text" id ="location" >
<span>公司类型:</span> <input type="text" id ="companyType" >
<br>
<span>公司名称:</span> <input type="text" id ="companyName" >
<span>老板姓名:</span> <input type="text" id ="bossName" >
<br>
<span>money:</span> <input type="text" id ="money" >
<span>产品:</span> <input type="text" id ="product" >
<br>
<span>价格计量单位:</span> <input type="text" id ="unit" >

<br>

</body>
</html>

渲染中渲染完成

效果

JavaScript系列教材（九）- 语言基础 - 阶段性练习1

JavaScript系列教材（十一）- 语言基础 - 作用域

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2022-04-21 不容易，终于完成了一个，记录一下

lusir_666

关于前端部分-JavaScript-阶段性练习2 的提问

感觉基本满足了要求，终于有点信心学下去了，呜呜呜

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
		var addressName,companyType,companyName,bossName,money,product,unit,result;
		function get(){
			addressName=document.getElementById("addressName").value;
			companyType=document.getElementById("companyType").value;
			companyName=document.getElementById("companyName").value;
			bossName=document.getElementById("bossName").value;
			money=document.getElementById("money").value;
			product=document.getElementById("product").value;
			unit=document.getElementById("unit").value;
			result=addressName +"最大"+companyType+companyName+"倒闭了，王八蛋老板"+bossName+"吃喝嫖赌，欠下了"+money+"个亿，"
                            + "带着他的小姨子跑了!我们没有办法，拿着"+product+"抵工资!原价都是一"+unit+"多、两"+unit+"多、三"+unit+"多的"+product+"，"
                            + "现在全部只卖二十块，统统只要二十块!"+bossName+"王八蛋，你不是人!我们辛辛苦苦给你干了大半年，"
                            + "你不发工资，你还我血汗钱，还我血汗钱!";   
			document.getElementById("result").value=result;
		}
		
	</script>
	<style>
		.d1{
			float: left;
			border: 1px solid darkgrey;
			width: 100px;
			font-family: 宋体;
		}
		.d2{
			width: 200px;
			float: left;
			margin-left: 10px;
			border: 1px solid black;
		}
		.d3{
			float: left;
			border: 1px solid darkgrey;
			width: 100px;
			font-family: 宋体;
			margin-left:10px ;
		}
		.d4{
			width: 100px;
			margin-top: 7px;
			float: left;
			border: 1px solid darkgrey;
			font-family: 宋体;
		}
		.d5{
			width: 200px;
			float: left;
			margin-top: 7px;
			margin-left: 10px;
			border: 1px solid black;
		}
		.d6{
			float: left;
			border: 1px solid darkgrey;
			width: 100px;
			font-family: 宋体;
			margin-top: 7px;
			margin-left:10px ;
		}
		.d7{
			margin-left: 350px;
			width: 80px;
			height: 30px;
		}
		.d8{
			margin-top: 15px;
		}
	</style>
	<body>
		<div class="d1">地名：</div>
		<input type="text" id="addressName" class="d2"/>
		<div class="d3">公司类型：</div>
		<input type="text" id="companyType" class="d2"/>
		<div style="clear: both;"></div>
		<div class="d4">公司名称：</div>
		<input type="text" id="companyName" class="d5"/>
		<div class="d6">老板姓名：</div>
		<input type="text" id="bossName" class="d5"/>
		<div style="clear: both;"></div>
		<div class="d4">money:</div>
		<input type="text" id="money" class="d5" />
		<div class="d6">产品：</div>
		<input type="text" id="product" class="d5" />
		<div style="clear: both;"></div>
		<div class="d4">价格计量单位：</div>
		<input type="text" id="unit" class="d5" />
		<div style="clear: both;"></div>
		<input type="button" value="生成" class="d7" onclick="get()"/><br />
		<textarea class="d8" id="result" ></textarea>
	</body>
</html>

2 个答案

CharlieLong
答案时间：2023-10-31

混蛋黄鹤吃喝嫖赌！你不是东西你不是人！

代码超过 5行，点击查看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>haunghe</title>
    <script>
        function generate(){
            var areaName=document.getElementById("areaName").value
            var companyType=document.getElementById("companyType").value
            var companyName=document.getElementById("companyName").value
            var bossName=document.getElementById("bossName").value
            var money=document.getElementById("money").value
            var productName=document.getElementById("productName").value
            var unit=document.getElementById("unit").value
            document.getElementById("result").value=`${areaName}最大${companyType}${companyName}倒闭了，王八蛋老板${bossName}吃喝嫖赌，欠下了${money}，带着他的小姨子跑了！我们没有办法，拿着${productName}抵工资！原价都是一${unit}多、两${unit}多、三${unit}多的${productName}，现在全部只卖二十块，统统只要二十块！${bossName}王八蛋，你不是人！我们辛辛苦苦给你干了大半年，你不发工资，你还我血汗钱，还我血汗钱!`
        }
    </script>
</head>
<body>
<table>
    <tr>
        <td>地名：</td>
        <td><input type="text" id="areaName"></td>
        <td>公司类型:</td>
        <td><input type="text" id="companyType"></td>
    </tr>
    <tr>
        <td>公司名称：</td>
        <td><input type="text" id="companyName"></td>
        <td>老板名称:</td>
        <td><input type="text" id="bossName"></td>
    </tr>
    <tr>
        <td>money：</td>
        <td><input type="text" id="money"></td>
        <td>产品:</td>
        <td><input type="text" id="productName"></td>
    </tr>
    <tr>
        <td>价格计量单位：</td>
        <td><input type="text" id="unit"></td>
    </tr>
</table>
</br>
<div style="width: 600px;text-align: center"><button id="generate" style="width: 80px" onclick="generate()">生成</button></div>
</br>
<textarea id="result" style="width: 600px;height: 300px"></textarea>
</body>
</html>

LUO萝北
答案时间：2023-05-31

代码超过 5行，点击查看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 350px;
            margin: auto;
        }
        #text{
            width: 340px;
            height: 200px;
            font-size: 1.3em;
            text-indent: 2em;
            padding-top: 3px;
        }
        #buttonCreate{
            width: 348px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td><input type="text" readonly="true" value="地名："></td>
            <td><input id="i1" type="text" value="浙江"></td>
        </tr>
        <tr>
            <td><input type="text" readonly="true" value="公司类型："></td>
            <td><input id="i2" type="text" value="互联网公司"></td>
        </tr>
        <tr>
            <td><input type="text" readonly="true" value="公司名称："></td>
            <td><input id="i3" type="text" value="阿里九九"></td>
        </tr>
        <tr>
            <td><input type="text" readonly="true" value="老板姓名："></td>
            <td><input id="i4" type="text" value="牛风"></td>
        </tr>
        <tr>
            <td><input type="text" readonly="true" value="money："></td>
            <td><input id="i5" type="text" value="一万"></td>
        </tr>
        <tr>
            <td><input type="text" readonly="true" value="产品："></td>
            <td><input id="i6" type="text" value="贴膜"></td>
        </tr>
        <tr>
            <td><input type="text" readonly="true" value="价格计量单位："></td>
            <td><input id="i7" type="text" value="百"></td>
        </tr>
        <tr>
            <td colspan="2"><button id="buttonCreate" onclick="writeText()">生成</button></td>
        </tr>
        <tr>
            <td colspan="2">
                <textarea id="text" type="text" readonly="true" placeholder="正在准备中。。。"></textarea>

            </td>
        </tr>
    </table>
    <script>
        function writeText(){
            var i1 = document.getElementById("i1").value;
            var i2 = document.getElementById("i2").value;
            var i3 = document.getElementById("i3").value;
            var i4 = document.getElementById("i4").value;
            var i5 = document.getElementById("i5").value;
            var i6 = document.getElementById("i6").value;
            var i7 = document.getElementById("i7").value;
            var str = i1+"最大"+i2+i3+"倒闭了，王八蛋老板"+i4+"吃喝嫖赌，欠下了"+i5+"个亿，带着他的小姨子跑了!我们没有办法，拿着"+i6+"抵工资!原价都是一"+i7+"多、两"+i7+"多、三"+i7+"多的贴膜，现在全部只卖二十块，统统只要二十块!"+i4+"王八蛋，你不是人!我们辛辛苦苦给你干了大半年，你不发工资，你还我血汗钱，还我血汗钱!"
            document.getElementById("text").value = str;
        }
    </script>
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-03-29 stage exercise2

胡乱起个名

关于前端部分-JavaScript-阶段性练习2 的提问

练习-黄鹤的界面，使用javascript做出一个相同的功能出来

<style>
	body{
		font-family: 宋体;
		font-size: 16px;
	}
	span{
		display: inline-block;
		border: 1px solid lightgray; 
		width: 120px;
		height: 20px;
		margin: 0px 3px;
	}
	input{
		display: inline-block;
		width: 120px;
		height: 26px;
		margin: 5px 3px;
	}
	button{
		width: 60px;
		height: 30px;
	}
	textarea{
		width:100%;
		height:150px;
		margin-top:20px;
		font-family: 宋体;
		font-size: 10px;
	}
</style>

<script>
	var text1 = document.getElementsByName("text1");
	var text2 = document.getElementsByName("text2");
	var text3 = document.getElementsByName("text3");
	var text4 = document.getElementsByName("text4");
	var text5 = document.getElementsByName("text5");
	var text6 = document.getElementsByName("text6");
	var text7 = document.getElementsByName("text7");
	var text;
	function sum(text1, text2, text3, text4, text5, text6, text7){
		text = text1[0].value +"最大"+ text2[0].value + text3[0].value + "倒闭了，王八蛋老板" + text4[0].value + "吃喝嫖赌，欠下了"+ text5[0].value + "个亿，" +  "带着他的小姨子跑了!我们没有办法，拿着" + text6[0].value +"抵工资!原价都是一" + text7[0].value +"多、两"+ text7[0].value +"多、三"+ text7[0].value +"多的"+ text7[0].value +"，" +  "现在全部只卖二十块，统统只要二十块!" + text4[0].value + "王八蛋，你不是人!我们辛辛苦苦给你干了大半年，" + "你不发工资，你还我血汗钱，还我血汗钱!";
		return text;
	}
	function generate(id){
		text = sum(text1, text2, text3, text4, text5, text6, text7);
		document.getElementById("result").value = text;
		var val = document.getElementById("result").value;
		return val;
	}
</script>

<body>
	<span align="left">地名:</span><input name="text1" size="20" value="浙江">
	<span align="left">公司类型:</span><input name="text2" size="20" value="互联网公司"></br>
	<span align="left">公司名称:</span><input name="text3" size="20" value="阿里九九">
	<span align="left">老板姓名:</span><input name="text4" size="20" value="牛风了"></br>
	<span align="left">money:</span><input name="text5" size="20" value="一万">
	<span align="left">产品:</span><input name="text6" size="20" value="贴膜"></br>
	<span align="left">价格计量单位:</span><input name="text7" size="20" value="百">
	</br></br>
	<div align="center">
		<button onclick="generate('result')">生成</button></br>
	</div>
	<textarea id="result"></textarea>
</body>

1 个答案

大瓜牛
答案时间：2022-05-28

代码超过 5行，点击查看

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-03-15 答案

logiczqr

关于前端部分-JavaScript-阶段性练习2 -练习-黄鹤的提问

实现了

<style>
            .name{
                border: 1px solid lightgray;
                width: 150px;
                display: inline-block;
                font-family: "宋体";
            }
            .value{
                width: 200px;
            }
            .d1{
                width: 1000px;
                height: 100px;
            }
            .b2{
                float: right;
                width: 100px;
                height: 50px;
            }
        </style>
        <script>
            function make(){
                var addr = document.getElementById("addr").value;
                var ctype = document.getElementById("ctype").value;
                var cname = document.getElementById("cname").value;
                var bname = document.getElementById("bname").value;
                var money = document.getElementById("money").value;
                var prod = document.getElementById("prod").value;
                var price = document.getElementById("price").value;
                var txt = addr+"最大"+ctype+cname+"倒闭了，王八蛋老板"+bname+"吃喝嫖赌，欠下了"+money+
                "个亿，带着他的小姨子跑了!我们没有办法，拿着"+prod+"抵工资!原价都是一"+price+"多、两"+price+
                "多、三"+price+"多的"+prod+"，现在全部只卖二十块，统统只要二十块!"+bname+"王八蛋，你不是人!我们辛辛苦苦给你干了大半年，你不发工资，你还我血汗钱，还我血汗钱!"
                document.getElementById("t1").value = txt;
            }
        </script>

<span class="name">地名：</span>
        <input type="text" class="value" id="addr">
        <span class="name">公司类型：</span>
        <input type="text" class="value" id="ctype">
        <br>
        <span class="name">公司名称：</span>
        <input type="text" class="value" id="cname">
        <span class="name">老板姓名:</span>
        <input type="text" class="value" id="bname">
        <br>
        <span class="name">money:</span>
        <input type="text" class="value" id="money">
        <span class="name">产品:</span>
        <input type="text" class="value" id="prod">
        <br>
        <span class="name">价格计量单位:</span>
        <input type="text" class="value" id="price">
        <br>
        <div class="d1">
            <button class="b2" onclick="make()">生成</button>
        </div>
        <textarea id="t1" cols="200" rows="10"></textarea>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-11-04 求问

Lee_Le

关于前端部分-JavaScript-阶段性练习2 的提问

已经很仔细的做了对比，就是点击生成不了

<html>
<script>
    function generate() {
        var location = $("location");
        var companyType = $("compantType");
        var companyName = $("companyName");
        var bossName = $("bossName");
        var money = $("money");
        var product = $("product");
        var unit = $("unit");

        var result = location + "最大" + companyType + companyName + "倒闭了，王八蛋老板" + bossName + "吃喝嫖赌，欠下了" + money + "个亿，" +
            "带着他的小姨子跑了!我们没有办法，拿着" + product + "抵工资!原价都是一" + unit + "多、两" + unit + "多、三" + unit + "多的" + product + "，" +
            "现在全部只卖二十块，统统只要二十块!" + bossName + "王八蛋，你不是人!我们辛辛苦苦给你干了大半年，" +
            "你不发工资，你还我血汗钱，还我血汗钱!";

        document.getElementById("result").value = result;

    }

    function $(id) {
        var value = document.getElementById(id).value
        return value;
    }
</script>

<style>
    body {
        font-family: 宋体;
    }

    span {
        display: inline-block;
        /* display-style: box; */
        border: 1px solid lightgray;
        width: 120px;
        margin-bottom: 5px;
    }

    button#generate {
        width: 80px;
        height: 30px;
    }

    textarea {
        width: 100%;
        height: 150px;
        margin-top: 30px;
    }
</style>


<body>
    <span>地名：</span> <input type="text" id='location'>
    <span>公司类型：</span> <input type="text" id='companyType'>
    <br>
    <span>公司名称：</span> <input type="text" id='companyName'>
    <span>老板姓名：</span> <input type="text" id="bossName">
    <br>
    <span>money:</span> <input type="text" id='money'>
    <span>产品：</span> <input type="text" id='product'>
    <br>
    <span>价格计量单位：</span> <input type="text" id='unit'>

    <br>
    <div align="center">
        <button id='generate' onclick="generate()">生成</button>
        <br>
        <textarea id="result"></textarea>
    </div>

    <br>

</body>

</html>

1 个答案

Venom1111
答案时间：2021-11-17

你的第5行companyType写错了。

var companyType = $("compantType");
->
var companyType = $("companyType");

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-07-31 只看body和style部分，界面和站长要求一样加上script就不一样了，求解。

my-java

关于前端部分-JavaScript-阶段性练习2 的提问

只看body和style部分，界面和站长要求一样加上script就不一样了，求解。

<html>
<script>
function get(){
  var value1 = document.getElementById("location").value;
  var value2 = document.getElementById("companyType").value;
  var value3 = document.getElementById("companyName").value;
  var value4 = document.getElementById("bossName").value;
  var value5 = document.getElementById("money").value;
  var value6 = document.getElementById("product").value;
  var value7 = document.getElementById("unit").value;
   
var result  = value1 +"最大"+value2+value3+"倒闭了，王八蛋老板"+value4+"吃喝嫖赌，欠下了"+value5+"个亿，"
                            + "带着他的小姨子跑了!我们没有办法，拿着"+value6+"抵工资!原价都是一"+value7+"多、两"+value7+"多、三"+value7+"多的"+value6+"，"
                            + "现在全部只卖二十块，统统只要二十块!"+value4+"王八蛋，你不是人!我们辛辛苦苦给你干了大半年，"
                            + "你不发工资，你还我血汗钱，还我血汗钱!";    

   document.getElementById("result").value=result;   
 }
</script>
 

<style>
body{
   font-family: 宋体;
}
span{
   display:inline-block;
   border: 1px solid lightgray;
   width:120px;
   margin-bottom:5px;
}
 
button#get{
   width:80px;
   height:30px;
}
 
textarea{
     width:100%;
     height:150px;
     margin-top:20px;
}
 
</style>

<body>
<span>地名：</span><input type="text" id="location" value="浙江">
<span>公司类型：</span><input type="text" id="companyType" value="公司类型">
<br>
<span>公司名称：</span><input type="text" id="companyName" value="阿里救救">
<span>老板姓名：</span><input type="text" id="bossName" value="牛fd">
<br>
<span>money：</span><input type="text" id="money" value="一万">
<span>产品：</span><input type="text" id="product" value="贴膜">
<br>
<span>价格计量单位：</span><input type="text" id="unit" value="百">
<br>

<div align="center">
<button id="get" onclick="get()">生成</button>
<br>
<textarea id="result">浙江最大互联网公司阿里九九倒闭了，王八蛋老板牛风吃喝嫖赌，欠下了一万个亿，带着他的小姨子跑了!我们没有办法，拿着贴膜抵工资!原价都是一百多、两百多、三百多的贴膜，现在全部只卖二十块，统统只要二十块!牛风王八蛋，你不是人!我们辛辛苦苦给你干了大半年，你不发工资，你还我血汗钱，还我血汗钱!</textarea>
</div>
<br>

</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 26 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-JavaScript-阶段性练习2 的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图