어떻게 자바 스크립트 함수에 html 입력 텍스트를 매개 변수로 전달합니까?

-2

내 코드는 다음과 같습니다. 플레이어가 자신의 이름을 html 형식으로 입력하고이 값을 javascript 스코어 카드 클래스에 제출하여 this.players = "name"이되도록하고 싶습니다. 어떻게하면 좋을까요? jquery를 사용하려고했지만 성공하지 못했습니다.어떻게 자바 스크립트 함수에 html 입력 텍스트를 매개 변수로 전달합니까?

HTML :

<section class="name1-2-12"> 
    <form class='name' action=''> 
    <input type="text" name="name" placeholder="NAME"> 
    <input type='submit' name='submit'> 
    </form> 
</section>

JAVASCRIPT : jQuery로

var Scorecard = function() { 
    this.players = 0; 
}; 

Scorecard.prototype.addPlayer = function(name) { 
    this.players = name 
};

출처

2015-01-24 Gus Powell

JQuery와 솔루션이 좋은,하지만 행사를위한 조금 너무 이상한.

일반 자바 스크립트 : 당신은 정말 자바 스크립트에 익숙하지 않는

는 것 같아요 :

var Scorecard = function() { 
    this.players = 0; 
}; 

Scorecard.prototype.addPlayer = function(name) { 
    this.players = name 
};

이 코드는 두 가지 않습니다 : 그것은 Scorecard라는 생성자 함수를 만듭니다

합니다. 이 함수를 사용하면 instances (간단히 복사본 넣기)을 Scorecard으로 만들 수 있습니다.
프로토 타입을 사용하여 Scorecard 마스터 객체에 함수를 추가합니다. prototype를 통해 추가 모든이를 정리해 Scorecard

의 모든 인스턴스에 의해 공유됩니다. 이것은 원하는 기능을 수행하는 방법이 아닙니다. 이것을 고려하십시오 :

그것은 Scorecard라는 마스터 객체를 만듭니다

var Scorecard = function() { 
    this.players = 0; 
    this.playerList = []; //create a new Array() using shorthand []; 
    this.addPlayer = function(name) 
    { 
     this.players++; //add one to the player count. 
     this.playerList.push(name); //add a player to the playerlist using array.push(). 
    } 
};

하고이 코드는 무엇인가.

this.players이라는 공용 변수가 지정됩니다. 함수 외부에서 호출 할 수 있기 때문에 public이됩니다. Scorecard.
배열에 대해서도 마찬가지입니다. this.playerList.
일반용 method가 추가되었습니다. 이 함수는 인스턴스에만 적용되며 모든 인스턴스와 공유되지 않습니다.
addPlayer 메서드는 두 가지 작업을 수행합니다. 인수로서 이름을 취합니다. 먼저 공용 변수 this.players에 1을 더하고 ++을 추가합니다. 이는 하나를 추가한다는 의미입니다. 두 번째로 플레이어는 push 메서드를 사용하여 배열 목록에 플레이어를 추가합니다. 배열에 항목을 추가합니다.

이제 제출 이벤트를 만들어야합니다. 사용자가 양식을 제출하면 점수 카드에 플레이어가 추가됩니다.

그것은 새로운 인스턴스 (사본)을 생성 Scorecard의 scorecard 이름 :

var scorecard = new Scorecard(); //first create an instance of Scorecard 
document.querySelector("form").addEventListener("submit", formAddPlayer, false); 

function formAddPlayer(e) 
{ 
    e.preventDefault(); //e is the submit event. preventDefault stops it from actually posting the form, causing the page to reload. 
    var name = e.target.querySelector("input[name='name']").value //get the value from the input element. 
    scorecard.addPlayer(name); 

    //show the results 
    alert("Player amount: " + scorecard.players + "\nPlayers: \n -" + scorecard.playerList.join("\n -")); //show the results 
}

하고있는 코드는 무엇입니까.

해당 인스턴스는 players 및 playerList의 두 가지 속성과 하나의 방법 : addPlayer이 있습니다.
에 올리기 제출 이벤트을 양식에 첨부하십시오. 나는 이것에 document.querySelector을 사용했다. 페이지에는 하나의 양식 만 있기 때문에 querySelector 기능이 제공되는 첫 번째 양식을 선택할 수 있습니다. 우리는 addEventListener을 사용하여 이벤트를 첨부합니다. 제출 버튼을 클릭하면 formAddPlayer 기능이 실행됩니다. formAddPlayer은 함수 호출이 아닌 참조로 전달됩니다.
실제 formAddPlayer 함수 : 인수 e은 이벤트를 나타냅니다. 이 경우 이벤트을 제출하십시오. 실제 제출은 e.preventDefault()을 사용하여 취소됩니다. 양식 요소에서 querySelector을 사용합니다 (target을 사용하여 검색, form, 제출 이벤트). 입력 요소를 name : name으로 선택하고 value을 사용하여 값을 검색합니다. 이 값을 인스턴스 scorecard의 addPlayer 메서드에 전달합니다. 함께

알 :

function Scorecard() { 
    this.players = 0; 
    this.playerList = []; //create a new Array() using shorthand []; 
    this.addPlayer = function(name) { 
    this.players++; //add one to the player count. 
    this.playerList.push(name); //add a player to the playerlist using array.push(). 
    } 
}; 

var scorecard = new Scorecard(); //first create an instance of Scorecard 

function formAddPlayer(e) { 
    e.preventDefault(); //e is the submit event. preventDefault stops it from actually posting the form, causing the page to reload. 
    var name = e.target.querySelector("input[name='name']").value //get the value from the input element. 
    scorecard.addPlayer(name); 

    //show the results 
    alert("Player amount: " + scorecard.players + "\nPlayers: \n -" + scorecard.playerList.join("\n -")); //show the results 
} 
document.querySelector("form").addEventListener("submit", formAddPlayer, false);

<section class="name1-2-12"> 
    <form class='name' > 
    <input type="text" name="name" placeholder="NAME"> 
    <input type='submit' name='submit'> 
    </form> 
</section>

http://jsfiddle.net/55u2b81j/

출처

2015-01-24 16:34:28 Mouser

var aScorecard = new Scorecard(); 

$('form.name').on('submit',function(e){ 
    e.preventDefault(); 
    var name = $(this).children('input[name="name"]').val(); 
    aScorecard.addPlayer(name); 
});

출처

2015-01-24 15:55:17 llernestal

어떻게 자바 스크립트 함수에 html 입력 텍스트를 매개 변수로 전달합니까?

답변

관련 문제