Question

我正在尝试创建一个简单的警报消息，现在我正在尝试做的是，如果用户无法登录警报消息，则背景颜色为红色，如果用户成功登录警报背景 - 颜色是绿色。我不知道怎么做才能如果用户成功登录它使用'alertsuccess'div而不是'alert'div。我不知道如何解决这个问题，所以感谢任何帮助

<div id="alert" style="display:none;">
<span class="closebtn" onclick="this.parentElement.style.display='none';">&  times;</span> 
<p id="alertmsg"> </p>
</div>

<div id="alertsuccess" style="display:none;">
 <span class="closebtn" onclick="this.parentElement.style.display='none';">&     times;</span> 
<p id="alertmsg"> </p>
</div>

 <input type="text" id="username" placeholder="Username" name="uname" maxlength="15" required>

<button id="button123" onclick="showalert('alert');">Submit</button>

我的Javascript

 function showalert(id){
 var divelement = document.getElementById(id);
 var username = document.getElementById("username").value;

   if (username === ""){
    document.getElementById("alertmsg").innerHTML = "You didn't insert a username!";
    divelement.style.display =='none'
    divelement.style.display = 'block';
    }

    else if(username === "u1460714"){
    document.getElementById("alertmsg").innerHTML = "Successfully logged   in";
    divelement.style.display =='none'
    divelement.style.display = 'block';
    }
    }

最后我的css

#alert {
height:100px;
width:300px;
background-color: #f44336;
color: white;
position: fixed;
}

.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}

.closebtn:hover {
color: black;
}

#alertmsg{
font-family:sans-serif;
font-size:15px;
text-align: center;
}

#alertsuccess {
background-color: #4CAF50;
}

Answer 1

您可以只设置一个div的颜色，而不是使用两个function showalert(alert) { var alertBlock = document.getElementById(alert); var inputName = document.getElementById('username'); var messageBlock = document.getElementById('alertmsg'); alertBlock.style.display = 'block'; if (inputName.value == '') { alertBlock.style.backgroundColor = 'red'; messageBlock.innerHTML = 'No username entered'; } else if (inputName.value == 'u2345') { alertBlock.style.backgroundColor = 'green'; messageBlock.innerHTML = 'You entered the specific username'; } }。然后，您不会遇到两次具有相同ID的问题。

＆＃13;

#alert {
  width: 200px;
  height: 200px;
  display: none;
 }

＆＃13;

<div id="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">X</span> 
<p id="alertmsg">test</p>
</div>

 <input type="text" id="username" placeholder="Username"name="uname" maxlength="15" required>

<button id="button123"onclick="showalert('alert');">Submit</button>

＆＃13;

kramdown:
  # parse markdown inside block-level HTML tag
  parse_block_html: true

＆＃13;

Answer 2

我认为你有错字

locationservice.js

应该是=＆＃39;无＆＃39;或者它会进行比较。还有一些其他线也一样。希望这有帮助

Answer 3

你可以做的是创建一个div（带你的id）并使用css类根据输入改变外观。我们可以简单地通过类警报和成功来改变外观，而不是在警报div下面创建一个新的div。 ID为“警报”的div永远不会更改，除了您在javascript中定义的类。

看一下css，尤其是#alert，＃alert.alert和＃alert.success。值得注意的一点是，id为“警告”的div。默认情况下隐藏，这可以在javascript中被否决。还要尽量避免在元素上使用id，因为元素不太可重用，那么在使用类时。

＆＃13;

function showalert(id) {
  var divelement = document.getElementById('alert');
  var username = document.getElementById("username").value;
  if (username === "") {
    document.getElementById("alertmsg").innerHTML = "You didn't insert a username!";
    divelement.style.display = 'block';
    divelement.className = 'alert'
  } else if (username == "u1460714") {
    document.getElementById("alertmsg").innerHTML = "Successfully logged in";
    divelement.style.display = 'block'
    divelement.className = 'success'
  } 
}

＆＃13;

#alert {
  height: 100px;
  width: 300px;
  color: white;
  position: fixed;
  display: none;
}

#alert.alert {
  background-color: #f44336;
}

#alert.success {
  background-color: #4CAF50;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

#alertmsg {
  font-family: sans-serif;
  font-size: 15px;
  text-align: center;
}

＆＃13;

<div id="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  <p id="alertmsg"> </p>
</div>

<input type="text" id="username" placeholder="Username" name="uname" maxlength="15" required>

<button id="button123" onclick="showalert('alert');">Submit</button>

＆＃13;

使用Javascript创建不同颜色的警报消息

3 个答案: