javascript - 显示 DIV 元素之一，具体取决于用户输入值-6ren

javascript - 显示 DIV 元素之一，具体取决于用户输入值

转载作者：行者123 更新时间：2023-11-28 03:07:28

我很挣扎......

我有一个<input> field 。根据输入，各种 <div> 之一应显示元素。在此示例中，它只是一个文本(例如“Dein Plan enthält weniger als 1500 kcal!”)，稍后 div 元素将是带有图片、按钮等的整个 block 。

我发现了一些关于 jQuery 的想法，但由于我从未使用过它，所以我不理解它。所以我尝试使用 if 函数并更改 style:none 来阻止。

我做错了什么？ div 不想出现...我是 Javascript 的初学者，所以如果您有任何提示，请为绝对的菜鸟解释一下:)

谢谢大家!

HTML

<body style="background-color:#000000">

<form>
    <p>
        <label for=bedarf> Mein Bedarf </label>
        <input type="bedarf" name="bedarf" id="bedarf" placeholder="2345">
        <button class="button1" type="button" id="berechnen" onclick="planholen()" > Plan anzeigen </button><br><br><br>
</form>

<div class="anzeige" id="erster" ><p>Dein Plan enthält weniger als 1500 kcal!</p></div>
<div class="anzeige" id="zweiter" ><p>Dein Plan enthält weniger als 1700 kcal!</p></div>
<div class="anzeige" id="dritter" ><p>Dein Plan enthält weniger als 1900 kcal!</p></div>
<div class="anzeige" id="vierter" ><p>Dein Plan enthält weniger als 2100 kcal!</p></div>
<div class="anzeige" id="funfter" ><p>Dein Plan enthält weniger als 2300 kcal!</p></div>
<div class="anzeige" id="sechster" ><p>Dein Plan enthält weniger als 2500 kcal!</p></div>
<div class="anzeige" id="siebter" ><p>Dein Plan enthält weniger als 2700 kcal!</p></div>
<div class="anzeige" id="achter" ><p>Dein Plan enthält weniger als 2900 kcal!</p></div>
<div class="anzeige" id="neunter" ><p>Dein Plan enthält weniger als 3100 kcal!</p></div>
<div class="anzeige" id="zehnter" ><p>Dein Plan enthält weniger als 3300 kcal!</p></div>
<div class="anzeige" id="elfter" ><p>Dein Plan enthält weniger als 3500 kcal!</p></div>
<div class="anzeige" id="zwölfter" ><p>Dein Plan enthält weniger als 3700 kcal!</p></div>
<div class="anzeige" id="dreizehnter" ><p>Dein Plan enthält weniger als 3900 kcal!</p></div>

</body>

CSS

<style>

label {
    width: 100px;
    display: inline-block;
    font-family: Arial;
    color: #ffffff;
}

input {
    width: 120px;
    height: 25px;
    text-align: center;
    font-family: Arial;
    font-size: 14px
}


.button1 {
    width:130px;
    height:25px;
    position: absolute;
    left: 250px;
    top: 4px;
}

button {
  background-color: #ddca07; /* Green */
  border: none;
  color: white;
  height:30px; 
  width:50px; 
  padding: 2px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

button {
  background-color: black; 
  color: white; 
  border: 1px solid #ddca07;
  width:140px;
  height:25px;
  font-size: 16px;
  font-style:bold;
}

button:hover {
  background-color: #ddca07;
  color: black;
}

.anzeige {
    font-family:Arial;
    color:#ffffff;
    display:none;
    }

</style>

<script>

function planholen() {
    var a = document.getElementById("erster");
    var b = document.getElementById("zweiter");
    var c = document.getElementById("dritter");
    var d = document.getElementById("vierter");
    var e = document.getElementById("funfter");
    var f = document.getElementById("sechster");
    var g = document.getElementById("siebter");
    var h = document.getElementById("achter");
    var i = document.getElementById("neunter");
    var j = document.getElementById("zehnter");
    var k = document.getElementById("elfter");
    var l = document.getElementById("zwölfter");
    var m = document.getElementById("dreizehnter");

    var val = parseInt(document.getElementById("bedarf");

    if (val < 1500) { a.style.display = "block"; } else
    if (val < 1700) { b.style.display = "block"; } else
    if (val < 1900) { c.style.display = "block"; } else
    if (val < 2100) { d.style.display = "block"; } else
    if (val < 2300) { e.style.display = "block"; } else
    if (val < 2500) { f.style.display = "block"; } else
    if (val < 2700) { g.style.display = "block"; } else
    if (val < 2900) { h.style.display = "block"; } else
    if (val < 3100) { i.style.display = "block"; } else
    if (val < 3300) { j.style.display = "block"; } else
    if (val < 3500) { k.style.display = "block"; } else
    if (val < 3700) { l.style.display = "block"; } else
    if (val < 3900) { m.style.display = "block"; } 


</script>

最佳答案

我已经添加了可以在下面运行的版本。看看你是否能理解这一切。不要灰心，我知道一开始可能会感到不知所措，但很快就会再次变得有趣:)

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Your diet-Plan</title>
	<style type="text/css">
		form {
			margin-bottom: 2rem;
		}

		label {
			width: 100px;
			display: inline-block;
			font-family: Arial;
			color: #fff;
		}

		input {
			width: 120px;
			height: 25px;
			text-align: center;
			font-family: Arial;
			font-size: 14px;
		}

		.button1 {
			width: 130px;
			height: 25px;
			position: absolute;
			left: 250px;
			top: 4px;
		}

		button {
			background-color: #ddca07; /* Green */
			border: none;
			color: white;
			height: 30px;
			width: 50px;
			padding: 2px 10px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 20px;
			margin: 4px 2px;
			-webkit-transition-duration: 0.4s; /* Safari */
			transition-duration: 0.4s;
			cursor: pointer;
		}

		button {
			background-color: black;
			color: white;
			border: 1px solid #ddca07;
			width: 140px;
			height: 25px;
			font-size: 16px;
			font-style: bold;
		}

		button:hover {
			background-color: #ddca07;
			color: black;
		}

		.anzeige {
			font-family: Arial;
			color: #fff;
		}

		.anzeige:empty {
			display: none;
		}
	</style>
</head>
<body style="background-color:#000000">
	<form id="diat">
		<label for=bedarf>Mein Bedarf</label>
		<input type="text" name="bedarf" id="bedarf" placeholder="2345">
		<button class="button1" type="submit">Plan anzeigen</button>
	</form>
	<div class="anzeige" id="anzeige"></div>

	<script>
		function planholen( event ) {
			event.preventDefault();
			var bedarf = parseInt( document.getElementById('bedarf').value ) || 0;
			var bedarfGerundet = Math.ceil( bedarf / 100 ) * 100;
			var anzeige = document.getElementById('anzeige');
			if( bedarf > 0 ) {
				anzeige.innerHTML = 'Dein Plan enthält weniger als ' + bedarfGerundet + ' kcal!';
			}
			else {
				anzeige.innerHTML = '';
			}
		}

		document.getElementById('diat').addEventListener('submit', planholen);
	</script>
</body>
</html>

我尽可能地遵守您的规范，但确实在这里和那里添加了一些东西。

我添加了.anzeige:empty { display: none; }在你的CSS中，这样你就不必处理这个逻辑了。现在只需清空 div，它就会被隐藏。
我将原始输入数据保留为 bedarf以确保我们稍后可以再次访问此内容
我假设您想在未插入任何内容时清空 div
我现在通过 js 插入文本，而不是已经将其放入 DOM 中(小得多)
现在，我不再在单击时执行我的函数，而是在提交时执行它，这意味着当有人点击 return 时关键它仍然有效(更多a11y)
由于我有限的德语技能，我在那里保留了尽可能多的德语:)

您的代码有一些问题:

var val = parseInt(document.getElementById("bedarf");缺少右括号
如果有人输入某些内容并点击您的按钮，然后改变主意并输入新按钮并再次点击该按钮，他们会收到几条消息，我认为这不是意图
前述submit on return问题
if (val < 1500) { a.style.display = "block"; } else无论如何，对我来说很难阅读...尝试为 else if 使用新行声明

希望这有帮助

关于javascript - 显示 DIV 元素之一，具体取决于用户输入值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60473781/

文章推荐： c++ - 如何从另一个类访问 main 中定义的类的对象

uml - guest 、用户、版主、管理员 - vs - 用户(角色 : guest, 用户、版主、管理员)
在为 Web 应用程序用例图建模时，为用户可以拥有的每个角色创建一个角色是否更好？或拥有一个角色、用户和一个具有特权的矩阵？ guest < 用户 < 版主 < 管理员 1: guest 、用户、版主
postgresql - Postgres 不允许更改角色 super 用户，我的默认用户不是 super 用户
我无法使用 Elixir 连接到 Postgres: ** (Mix) The database for PhoenixChat.Repo couldn't be created: FATAL 28P
Java Lambda 流列表<用户> 到映射<角色，列表<用户>>
这个问题已经有答案了: Group by field name in Java (7 个回答) 已关闭 7 年前。我必须编写一个需要 List 的方法并返回 Map> . User包含 Person
PHP，SQL - 获取表 id = 用户 id 的数据并计算行 = 用户 id 的其他表
感谢您的帮助，首先我将显示代码: $dotaz = "Select * from customers JOIN contracts where customers.user_id ='".$_SESS
android - 从 firebase 获取所有 child (用户)但向一个 child (用户)显示按钮？
我只想向所有用户中的一个用户显示一个按钮。我尝试了 orderByKey() 但没有成功! 用户模型有 id 成员，我尝试使用 orderByChild("id") 但结果相同! 我什至尝试了以下技巧
database - 让 PostgreSQL BDR 在没有 super 用户(postgres 用户)权限的情况下工作？
我们在工作中从 MongoDB 切换到 Postgres，我正在建立一个 BDR 组。在这一步，我正在考虑安全性并尽可能锁定。因此，我希望设置一个 replication 用户(角色)并让 BDR
"this.users = users;" not binding to "users;" property(“this.users=用户；”不绑定到“用户；”属性)
export class UserListComponent implements OnInit{ users; constructor(private userService: UserS
symfony - 更改密码在 FOS 用户 bundle + Sonata 用户 bundle +sonata 管理员 bundle 中不起作用
我可以使用 Sonata User Bundle 将 FOS 包集成到 sonata Admin 包中。我的登录功能正常。现在我想添加 FOSUserBundle 中的更改密码等功能到 sonata
oauth - 创建应用程序时，我从 LinkedId 获得的 OAuth 用户 token 和 OAuth 用户 key 的目的是什么
在 LinkedIn 中创建新应用程序时，我得到 4 个单独的代码: API key 秘钥 OAuth 用户 token OAuth 用户密码我在 OAuth 流程中使用前两个。的目的是什么？最后
c# - 用户 '' 登录失败，无法打开登录请求的数据库 "Database1.mdf"。登录失败。用户 'rBcollo-PC\rBcollo' 登录失败
所以..我几乎解决了所有问题。但现在我要处理另一个问题。我使用了这个连接字符串: SqlConnection con = new SqlConnection(@"Data Source=.\SQLEX
javascript - 通过 ids 匹配 2 个数组(用户 [用户 id 作为键] 到订单 [订单 ids 数组的值])
我有一组“用户”和一组“订单”。我想列出每个 user_id 的所有 order_id。 var users = { 0: { user_id: 111, us
django - “用户”对象没有属性is_authenticated
我已经为我的Django应用创建了一个用户模型 class User(Model): """ The Authentication model. This contains the u
laravel - 未定义密码重置器 [用户]
我被这个问题困住了，找不到解决方案。寻找一些方向。我正在用 laravel 开发一个新的项目，目前正致力于用户认证。我正在使用 Laravels 5.8 身份验证模块。对密码恢复 View 做了一些
ansible 用户配置中的当前用户
安装后我正在使用ansible配置几台计算机。为此，我在机器上本地运行 ansible。安装中的“主要”用户通常具有不同的名称。我想将该用户用于诸如 become_user 之类的变量. “主要”用
Django从批处理文件创建 super 用户
我正在尝试制作一个运行 syncdb 的批处理文件来创建一个数据库文件，然后使用用户名“admin”和密码“admin”创建一个 super 用户。到目前为止我的代码: python manage.
Vim 用户，你们的右手放在哪里？
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 6 年前。 Improv
Azure 故障转移数据库不复制登录名/用户
我已在 Azure 数据库服务器上设置异地复制。服务器上运行的数据库之一具有我通过 SSMS 创建的登录名和用户: https://learn.microsoft.com/en-us/azure/s
Ionic2 NativeStorage无法获取项目(用户)
我有一个 ionic 2 应用程序，正在使用 native FB Login 来检索名称/图片并将其保存到 NativeStorage。流程是我打开WelcomePage、登录并保存数据。从那里，na
Django - 用户 is_active
这是我的用户身份验证方法: def user_login(request): if request.method == 'POST': username = request.P
python - “用户”对象不可迭代
我试图获取来自特定用户的所有推文，但是当我迭代在模板中抛出推文时，我得到“User”对象不可迭代观看次数 tweets = User.objects.get(username__iexact='us

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 显示 DIV 元素之一，具体取决于用户输入值