2014-02-19 1 views
0

저는 HTML로 초보자이며 일부 조각을 함께 넣으려고 시도하지만 기울이지는 않습니다.텍스트 영역 상자에서 html을 전달하여 반환 된 결과를 표시합니다.

프로젝트 (내 프로젝트 단지 재미를 위해 -하지 않는 학교 나 직장 프로젝트)입니다 :

사용자로부터 한 줄의 텍스트를 얻을 수 (궁극적으로 텍스트의 '변화'발을 나타내는 정수) - 이 텍스트를 외부 js 파일의 함수에 전달합니다.이 함수는 텍스트 을 수정하고 html 페이지에 반환 된 결과를 표시합니다.

이상적으로는 2 부는 다른 함수 호출을 사용하여 해당 텍스트를 '매스 해제'하기 때문에 원래 입력 한 텍스트 영역 상자에 결과가 표시되도록하는 것이 이상적입니다.

그래서 멀리, 나는 자바 스크립트 파일을 가지고 있으며 잘 동작합니다. 내부의 함수는 smash ({string}) 입니다 (궁극적으로 사용자로부터 쿼리 된 값으로 스 내쉬 ({string}, {integer})됩니다). 텍스트 문자열을 getelementbyid 상자에 하드 코드 할 때 html 페이지에서 js 파일의 함수를 호출 할 수 있습니다.

하지만 텍스트 상자에서 함수 호출로 데이터를 전달하고 어디에서든지 (내 다음 논리적 단계가 될 것입니다) 표시하는 방법을 알아낼 수 없습니다.

궁극적으로 두 번째 값 (사용자가 입력 한 정수)도이 메서드에 영향을 미칠 수 있으므로 (.js에 하드 코드 된) 함수에 전달해야합니다. 첫 번째 부분.

또한이 문제에 대해 알고 있지만 '반환 결과'로 자바 스크립트 기능을 종료합니다. 명령. 여기서 var 결과에 수정 된 문자열이 들어 있지만 - 지금까지는 참조 할 필요가없는 것 같습니다.

다음은이 프로젝트 단계의 HTML 코드입니다. 당신이 줄 수있는 도움에 감사드립니다.

<!DOCTYPE html> 
<html> 
<body> 

<h1>ASCII SMASHER</h1> 
<p>Enter text in the "Smash me" box.</p> 
<p>Enter the smash factor" box.</p> 
<p></p> 
<p>Then click the "SMASH" button box.</p> 
<p id="UI"></p> 

<textarea name="ui1" rows="1" cols="30"> 
SIMPLY SMASHING! 
</textarea> 

(//// this is my attempt to send the text data to the function via a button //// 
//// as far as I can tell it doesnt work at all. It certainly doesnt display anything////) 

<button type="button" onclick="smash()">SMASH</button> 


<script src="smash2.js"></script> 

<script> 
(//// The line below does return the correct result for the hardcoded string below. So //// 
//// I know the basic call to the js function works at the lowest level. Frankly, //// 
//// I got the use of that line from another post here and dont really understand //// 
//// what it is doing. I see the function call plainly enough, and I know it is //// 
//// ultimately writing the return value to the screen, but that is as far as I get //// 
//// so if someone would care to take the trouble to explain what is going on with //// 
//// that, as well, I would take it kindly. ////) 

document.getElementById("UI").innerHTML=smash("SMASHING"); 
</script> 
</body> 

<footer> 
<p>"If you ask me you should stop all this smashing or 
mashing of the atom, or whatever your doing"</p> 
<p>(- The Absent-minded Professor - housekeeper)</p> 
</footer> 
</html> 
+0

의 기능은'정의 smash'된다

여기에 내가 노력하고 코드의 현재 버전은 무엇입니까? – tymeJV

+0

다음 코드를 게시하십시오 :'smash2.js' – Dayan

답변

1

이 개념을 이해하는 데 도움이되기를 바랍니다. 적어도 - http://jsfiddle.net/q4Tpn/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

<p>Then click the "SMASH" button box.</p> 
<div id="UI"> 
    <textarea id="uitext" name="ui1" rows="1" cols="30">SIMPLY SMASHING!</textarea> 
</div> 
<button id="button1" type="button">SMASH</button> 


<script> 
     $('#button1').click(function(){ 
      var temp = $("#uitext").val(); 
      $("#displayHere").text(temp); 
     }); 

</script> 

<div id="displayHere"> 
</div> 
1

나는 당신이 일을 제안 코드를 얻기 위해 시도하고 다소 작동하지만 스크립트를 호출하는 표시 나던 :

여기를보십시오); 내가 나서서 jQuery 라이브러리를 가져 표시되는 값은 smash() 함수가 생성하는 수정 된 문자열 대신 상자에 입력 된 값과 정확하게 일치합니다.

아마 내 코드에 결합 할 때 실수를 저질렀습니다. Tho 나는 코드의 button.click 부분을 연구하려고했는데 실제로 어떻게 작동하는지 이해하지 못합니다. 또는 클릭 할 때 smash1.js에서 함수 smash()를 호출하는 방법을 지정하는 방법을 이해합니다.

<!DOCTYPE html> 
<html> 

<head> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"> 
</script> 
</head> 

<body> 


<h1>ASCII SMASHER</h1> 
<p>Enter text in the "Smash me" box.</p> 
<p>Enter the smash factor" box.</p> 
<p></p> 
<p>Then click the "SMASH" button box.</p> 


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

<p>Then click the "SMASH" button box.</p> 
<div id="UI"> 
    <textarea id="uitext" name="ui1" rows="1" cols="30">SIMPLY</textarea> 
</div> 
<button id="button1" type="button">SMASH</button> 

<script src="smash1.js"></script> 

<script> 
     $('#button1').click(function(){ 
      var temp = $("#uitext").val(); 
      $("#displayHere").text(temp); 
     }); 

</script> 

<div id="displayHere"> 
</div> 


</body> 

<footer> 
<p>"If you ask me you should stop all this smashing or 
mashing of the atom, or whatever your doing"</p> 
<p>(- The Absent-minded Professor - housekeeper)</p> 
</footer> 
</html> 
관련 문제