Question

我是html的初学者，我试图将一些部分放在一起，但是不能让它们全部适合。

项目是（我的项目只是为了好玩 - 不是学校或工作项目）：

从用户那里获取一行文本（最后是一个表示文本'shift'val的整数） - 将该文本传递给外部js文件中的函数 - 该函数修改文本并让html页面显示返回的结果。

理想情况下，我希望返回的结果出现在最初输入的同一文本区域框中，因为第2部分将使用不同的函数调用来“取消”该文本。

到目前为止，我有javascript文件，它工作正常。其中的函数是smash（{string}）（最终它将粉碎（{string}，{integer}），并从用户查询这两个值）。当我将文本字符串硬编码到getelementbyid框中时，我能够从html页面调用js文件中的函数 - 这样可行。

但我无法弄清楚如何将数据从文本框传递到函数调用并在任何地方显示（这将是我的下一个逻辑步骤） - 更不用说回到文本区域框中了。

请记住，最终我还希望将第二个值（用户输入的整数）传递给函数（现在它在.js中硬编码），这样可能会影响首先执行此操作所需的方法一部分。

另外，我不知道这是否重要，但我退出了javascript函数并返回'return result;'命令。其中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>

Answer 1

我希望这可以帮助您更好地理解这个概念。我继续导入JQuery库;）

在此处试试：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>

Answer 2

我试图获得你建议使用的代码并且它有点工作但似乎没有调用脚本 - 至少显示的值正是在框中输入的内容而不是函数smash（）将产生的修改后的字符串

当我将它合并到我的代码中时，也许我犯了一个错误。我尝试研究代码的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>

从文本区域框传递html到功能并显示返回的结果

2 个答案: