이미지가 입력 필드에 입력 된 횟수만큼 표시됩니다.

jQuery로 모험을 시작했고 운동에서 나는 어떻게 처리해야할지 모르는 장애물이 있습니다. 숫자를 입력하면 사용자가 입력 한 횟수만큼 이미지가 표시되는 코드를 작성해야합니다. 숫자 만 허용하는 입력 필드 (코드를 추가로 확인해야 함). 최소 1, 최대 100 숫자가 아니거나 범위를 벗어난 경우 사용자에게 알립니다 사용자가 숫자를 입력하고 버튼을 클릭하면 프로그램이 위의 사용자를 사용자가 입력 한 횟수만큼 표시합니다. 무엇이 더 낳습니까? 완벽해야한다) 새로운 그림을 삽입하기위한 그림 5 개 (
). 내가 어떤 도움 감사합니다 ...이미지가 입력 필드에 입력 된 횟수만큼 표시됩니다.

<script> 
 
$(document).ready(function() { 
 

 
    $('#display').hide(); 
 
    $('#danger').hide(); 
 

 
    var src = $('#image').val(); 
 
    var number = $('#number').val(); 
 

 
    function showInput() { 
 
     var index = 1; 
 
     for (var index = 0; index < number; index++) { 
 
     document.getElementById('#display').innerHTML = 
 
      document.getElementById("#number").value; 
 
     } 
 
    } 
 
    
 
    $("#submit").click(function() { 
 
    if (number == "") { 
 
     //Check if number is numeric 
 
     $('#danger').html('Prosimy o wpisanie właściwej wartości').show(); 
 
     $("#number").attr("style", "border-color: red!important"); 
 
     return false; 
 
     
 
    } else if (number < 1 || number > 100) { 
 
     $('#danger').html('Prosimy o wpisanie właściwej wartości').show(); 
 
     $("#number").attr("style", "border-color: red!important"); 
 
     return false; 
 
     
 
    } else { 
 
     showInput() 
 
     $('#danger').html('Prosimy o wpisanie właściwej wartości').hide(); 
 
     $("#number").attr("style", "border-color: "); 
 
    } 
 
    }); 
 
    
 
}); 
 
</script> 
 

 
<body> 
 
    <form> 
 
     <br/> 
 
     <label for="name">Ile razy wyświetli się obrazek</label> 
 
     <input type="number" class="form-control" name="number" id="number" placeholder="wpisz liczbę od 1 do 100" required=""> 
 
    </form> 
 
    <br/> 
 
    <p> 
 
     <img id='display' src="kaczka.jpg" /> 
 
    </p> 
 
    <br/> 
 
    <br/> 
 
    <input type="submit" name="submit" id="submit" onclick="showInput()" > 
 
    <div id="danger" class="alert alert-danger collapse"></div> 
 
    <br/> 
 
    <div id="img"></div> 
 
</body>

출처

2017-11-08 Anita

문제는 당신이'showInput' 메서드를 호출하는 동안, 당신은 number' 변수'의 업데이트 된 값을 계산하지 않는 것이있을 수 있습니다. 'number = $ ('# number '). val();'클릭 메소드 콜백 내부. –

숫자 또는 문자열인지 확인하려면 typeof 연산자 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof를 사용하고 .clone() https : // api를 사용하십시오. jquery.com/clone/ 이미지를 복제 한 다음 http://api.jquery.com/append/를 원하는 노드에 추가하십시오. –

힌트 :'img' 태그에는'innerHTML'이 없습니다. 'x' 양의 이미지를 표시하려면'img' 태그를'x'만큼 만들어서 래퍼'div' (또는'p')에 넣어야합니다. –

근무 바이올린 : 당신이 만든 오류를 바탕으로 https://jsfiddle.net/4yqqp3m6/

, 당신이 진짜 그립을 얻기 위해 뭔가 쉽게 계속해야한다 javascript 및 JQuery입니다.

그래서 여기에 여러 문제가 있었다 - 확인 의견 :

자바 스크립트 :

$(document).ready(function() { 

     $('#display').hide(); 
     $('#danger').hide(); 


     var src = $('#image').val(); 
     var number = $('#number').val(); 

     function showInput(number) { // the same here to get the number 

      var index = 1 
      for (var index = 0; index < number; index++) { 
       document.getElementById('display').innerHTML += 
        ' <img src="https://www.w3schools.com/howto/img_fjords.jpg" />'; 
      } 

      $('#display').show(); 
     } 



      $("#submit").click(function() { 

      //!! this part you missed 
      number = $("#number").val(); // get the value from input 
         number = parseInt(number); // number is string cast it to integer 
      //!! 


      if (number == "") { 
       //Check if number is numeric 
       $('#danger').html('Prosimy o wpisanie właściwej wartości').show(); 
       $("#number").attr("style", "border-color: red!important"); 

       return false; 

      } else if (number < 1 || number > 100) { 
       $('#danger').html('Prosimy o wpisanie właściwej wartości').show(); 
       $("#number").attr("style", "border-color: red!important"); 

       return false; 

      } else { 

       showInput(number); // you have to give the number to function 
       $('#danger').html('Prosimy o wpisanie właściwej wartości').hide(); 
       $("#number").attr("style", "border-color: "); 


      } 
     }); 
    });

HTML : 나는 코드의 작은 리팩토링을했습니다

<body> 
    <form> 
     <br/> 
     <label for="name">Ile razy wyświetli się obrazek</label> 
     <input type="number" class="form-control" name="number" id="number" placeholder="wpisz liczbę od 1 do 100" required=""> 
    </form> 
    <br/> 

    <!-- this part was wrong too... --> 
    <div id='display'> 
    </div> 


    <br/> 
    <br/> 
    <input type="submit" name="submit" id="submit"> <!-- dont call show inpout yet --> 
    <div id="danger" class="alert alert-danger collapse"></div> 
    <br/> 
    <div id="img"></div> 
</body>

출처

2017-11-08 21:39:29 JTC

. 데모는 Plunker에서 확인할 수 있습니다.

$(document).ready(function() { 
    var image = document.getElementById('display').outerHTML; // to persist the image 
    $('#display').hide(); 
    $('#danger').hide(); 

    function showInput(number) { 
     $('#displayBox').html(''); // to remove previous images 
     for (var index = 0; index < number; index++) { 
      $('#displayBox').append(image); 
     } 
    } 

    $("#submit").click(function() { 
     var number = parseInt($('#number').val(), 10); // correct way to get a numeric input value 
     if (isNaN(number) || (number < 1 || number > 100)) { 
      $('#danger').html('Prosimy o wpisanie właściwej wartości').show(); 
      $("#number").attr("style", "border-color: red!important"); 
      return false; 
     } 
     showInput(number); // passing the actual number value 
     $('#danger').html('Prosimy o wpisanie właściwej wartości').hide(); 
     $("#number").attr("style", "border-color: "); 
    }); 
});

<body> 
    <form> 
     <label for="name">Ile razy wyświetli się obrazek</label> 
     <input type="number" class="form-control" name="number" id="number" placeholder="wpisz liczbę od 1 do 100" required=""> 
    </form> 
    <p id="displayBox"> <!-- that's what I've added to the template, here we will push our images --> 
     <img id='display' src="https://cdn0.iconfinder.com/data/icons/fruits/128/Banana.png" /> 
    </p> 
    <input type="submit" name="submit" id="submit" > <!-- no need to onclick since you have handler binding via js --> 
    <div id="danger" class="alert alert-danger collapse"></div> 
    <div id="img"></div> 
</body>

출처

2017-11-08 21:40:06 dhilt

그녀가 일하고 싶지 않다고 생각합니다 리팩토링 된 코드 ... 코드에 나쁜 점을 표시하고 올바른 방향으로 향하게하고 나머지 부분을 설명하도록하는 것이 좋습니다. – JTC

@JTC 코드 주석에 반영하려고했습니다. 감사합니다. – dhilt

이 코드에 작은 변화 만든 HTML :

CSS :

#display{ 
    width:20%; 
}

을3210

자바 스크립트 :

<script> 
var src = $('#image').val(); 
var number = $('#number').val(); 
$(document).ready(function() { 

    $('#display').hide(); 
    $('#danger').hide(); 



    $("#submit").click(function() { 
    src = $('#image').val(); 
    number = $('#number').val(); 
    console.log(number); 

     if (number == "") { 
      //Check if number is numeric 
      $('#danger').html('Prosimy o wpisanie właściwej wartości').show(); 
      $("#number").attr("style", "border-color: red!important"); 

      return false; 

     } else if (number < 1 || number > 100) { 
      $('#danger').html('Prosimy o wpisanie właściwej wartości').show(); 
      $("#number").attr("style", "border-color: red!important"); 

      return false; 

     } else { 

      showInput() 
      $('#danger').html('Prosimy o wpisanie właściwej wartości').hide(); 
      $("#number").attr("style", "border-color: "); 


     } 
    }); 
}); 

    function showInput() { 
     $('#container').empty(); 
     var index = 1 
     for (var index = 0; index < number; index++) { 
      $('#container').append("<img id='display' src='image.jpg' />"); 
     } 
    } 

</script>

HTML :

<body> 
    <form> 
    <br/> 
    <label for="name">Ile razy wyświetli się obrazek</label> 
    <input type="number" class="form-control" name="number" id="number" placeholder="wpisz liczbę od 1 do 100" required=""> 
</form> 
<br/> 
<div id="container"> 

</div> 
<br/> 
<br/> 
<input type="button" name="submit" id="submit" value="submit" onclick="showInput()" > 
<div id="danger" class="alert alert-danger collapse"></div> 
<br/> 
<div id="img"></div> 
</body>

출처

2017-11-08 21:49:34

이미지가 입력 필드에 입력 된 횟수만큼 표시됩니다.

답변

관련 문제