2016-11-15 2 views
1

Мне нужно проверить каждый раз, прежде чем пользователь нажимает кнопку «Добавить», чтобы проверить, введены ли данные или нет, но мой блок «if ... else» работает только один после этого он начинает принимать пустые записи в массиве. Я не уверен, почему он не работает в следующий раз. любая помощь заметна, так как я новичок в java-скрипте. вот мой фрагмент кода.почему блок if..else работает только один раз

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> 
 
    <title>Click the button to add a new el</title> 
 
</head> 
 

 
<body> 
 

 
    <label>Enter an New item to add in Stock</label> 
 
    <br> 
 
    <input type="text" name=" itemName" id="addItemInStock"></input> 
 
    <br> 
 
    <p id="errorMsg"></p> 
 

 
    <button onclick="addToStock()">Add</button> 
 

 
    <p id="showList"></p> 
 
    <p id="listCount"></p> 
 

 

 
    <script> 
 
     var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
 
     document.getElementById("showList").innerHTML = fruits; 
 
     var newItem = document.getElementById("addItemInStock"); 
 

 

 
     function addToStock() { 
 
      if ((newItem.value) === "") { 
 
       document.getElementById("errorMsg").innerHTML = "Blank item cannot be added!!"; 
 

 
      } else { 
 
       document.getElementById("errorMsg").style.display = "none"; 
 
       fruits.push(newItem.value); 
 
       document.getElementById("showList").innerHTML = fruits; 
 

 
       clearAndShow(); 
 
      } 
 
     } 
 

 
     function clearAndShow() { 
 
      newItem.value = " "; 
 
     } 
 
    </script> 
 

 
</body> 
 

 
</html>

+2

' "" =="! «' Попробуйте изменить 'clearAndShow()' функцию к этому: 'функции clearAndShow() { newItem.value = ""; } ' –

+0

@Kevin Kloet I diidnt получить то, что вы имеете в виду. –

+1

пустая строка - это не то же самое, что строка, которая связывает пробел –

ответ

2

Ваша clearAndShow функция устанавливает значение входных элементов в единое пространство, но if проверку на пустую строку.

Вы также установить display к тем не первый раз, когда он показывает, но никогда не переключить его обратно в block

var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
 
    document.getElementById("showList").innerHTML = fruits; 
 
    var newItem = document.getElementById("addItemInStock"); 
 

 

 
    function addToStock() { 
 
     if ((newItem.value) === "") { 
 
     document.getElementById("errorMsg").innerHTML = "Blank item cannot be added!!"; 
 
     document.getElementById("errorMsg").style.display = "block"; 
 
     } else { 
 
     document.getElementById("errorMsg").style.display = "none"; 
 
     fruits.push(newItem.value); 
 
     document.getElementById("showList").innerHTML = fruits; 
 

 
     clearAndShow(); 
 
     } 
 
    } 
 

 
    function clearAndShow() { 
 
     newItem.value = ""; 
 
    }
<label>Enter an New item to add in Stock</label> 
 
    <br> 
 
    </br> 
 
    <input type="text" name=" itemName" id="addItemInStock"></input> 
 
    <br></br> 
 
    <p id="errorMsg"></p> 
 

 
    <button onclick="addToStock()">Add</button> 
 

 
    <p id="showList"></p> 
 
    <p id="listCount"></p>

1

Вы должны сделать ошибку видно, как напротив 'none'.

document.getElementById("errorMsg").style.display = "block"; 

var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
 
document.getElementById("showList").innerHTML = fruits; 
 
var newItem = document.getElementById("addItemInStock"); 
 

 
function addToStock() { 
 
    if (newItem.value === "") { 
 
    document.getElementById("errorMsg").style.display = "block"; 
 
    document.getElementById("errorMsg").innerHTML = "Blank item cannot be added!!"; 
 
    } else { 
 
    document.getElementById("errorMsg").style.display = "none"; 
 
    fruits.push(newItem.value); 
 
    document.getElementById("showList").innerHTML = fruits; 
 
    clearAndShow(); 
 
    } 
 
} 
 

 
function clearAndShow() { 
 
    newItem.value = ""; 
 
}
<label>Enter an New item to add in Stock</label><br> 
 
<input type="text" name=" itemName" id="addItemInStock"></input><br> 
 
<p id="errorMsg"></p> 
 
<button onclick="addToStock()">Add</button> 
 
<p id="showList"></p> 
 
<p id="listCount"></p>

+0

, спасибо, что это работает. Мне просто интересно, почему отображение сообщения об ошибке связано с if else block, чтобы остановить выполнение после первого раза –

+0

, он не перестает работать, он не отображает ошибку. вы видите, что часть предотвращает вставку в массив. это работает, очевидно. –

+0

no..it начинает вставлять значения в арифметику, так как вы можете видеть, что «,» добавляются при каждом нажатии добавления, несмотря на то, что проблема с отображением сообщения об ошибке в коде –

0

Ваш код был только небольшой вопрос. когда вы устанавливаете newItem.value = "", это заставляет это условие сбой newItem.value! = "". Следовательно, ваша функция AddtoStock не работает должным образом

function addToStock() { 
    if ((newItem.value) === "") { 
    document.getElementById("errorMsg").innerHTML = "Blank item cannot be added!!"; 

    } else { 
    document.getElementById("errorMsg").style.display = "none"; 
    fruits.push(newItem.value); 
    document.getElementById("showList").innerHTML = fruits; 

    clearAndShow(); 
    } 
} 

function clearAndShow() { 
    newItem.value = ""; 
} 
Смежные вопросы