【问题标题】:Output in Textarea from User Input用户输入在 Textarea 中的输出
【发布时间】:2015-05-04 21:05:20
【问题描述】:

问题已解决

我刚开始学习 JavaScript,在为我玩的游戏编写快速工具时遇到了一个问题。我希望用户能够通过 HTML 表单输入一些内容,并且我希望 JS 脚本接受该输入并将其转换为 SQL。

这是我的 HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HabSQL - Online SQL Generator</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="css/styles.css" rel='stylesheet' type='text/css'>
</head>

<body>
<header>Welcome to HabSQL v1.0! The Online Habbo SQL Generator!</header>
<p>HabSQL is strictly for use with Habbo Furniture SQLs and Data. Please enter all necessary information accordingly.</p>
<script src="scripts/habSQL.js"></script>
<form action="javascript:void(habSQL())">
<fieldset>
Furniture Name: <input id="furniName" type="text">
Furniture ID: <input id="furniID" type="number"><br>
SWF File Name: <input id="fileName" type="text"> (Exclude .SWF)<br>
Sprite ID: <input id="spriteID" type="number"> (We recommend that you use the same ID as Furniture ID).
</fieldset>
<fieldset>
Furniture Type: <input id="furniType" type="radio" value="s" name="furniType">Floor <input id="furniType" type="radio" value="i" name="furniType">Wall <input id="furniType" type="radio" value="e" name="furniType">Effect<br>
</fieldset>
<fieldset>
Furniture Width: <input id="furniWidth" type="number" class="dimensions"> Furniture Length: <input id="furniLength" type="number" class="dimensions"> Furniture Height: <input id="furniHeight" type="number" class="dimensions"><br>
Can you stack furniture on it? <input id="canStack" type="radio" value="1" name="canStack">Yes <input id="canStack" type="radio" value="0" name="canStack">No<br>
Can you sit on it? <input id="canSit" type="radio" value="1" name="canSit">Yes <input id="canSit" type="radio" value="0" name="canSit">No<br>
Can you walk on/through it? <input id="canWalk" type="radio" value="1" name="canWalk">Yes <input id="canWalk" type="radio" value="0" name="canWalk">No<br>
Can you recycle it? <input id="canRecycle" type="radio" value="1" name="canRecycle">Yes <input id="canRecycle" type="radio" value="0" name="canRecycle">No<br>
Can you trade it? <input id="canTrade" type="radio" value="1" name="canTrade">Yes <input id="canTrade" type="radio" value="0" name="canTrade">No<br>
Can you sell it on the Marketplace? <input id="canSell" type="radio" value="1" name="canSell">Yes <input id="canSell" type="radio" value="0" name="canSell">No<br>
Can you give it to someone as a gift? <input id="canGive" type="radio" value="1" name="canGive">Yes <input id="canGive" type="radio" value="0" name="canGive">No<br>
Can you stack it in the inventory? <input id="invStack" type="radio" value="1" name="invStack">Yes <input id="invStack" type="radio" value="0" name="invStack">No<br>
</fieldset>
<fieldset>
Interaction Type:<br>
<input id="intType" type="radio" value="default" name="intType">None<br>
<input id="intType" type="radio" value="bed" name="intType">Bed<br>
<input id="intType" type="radio" value="vendingmachine" name="intType">Vending Machine<br>
<input id="intType" type="radio" value="trophy" name="intType">Trophy<br>
<input id="intType" type="radio" value="gate" name="intType">Gate<br>
<input id="intType" type="radio" value="onewaygate" name="intType">One Way Gate<br>
<input id="intType" type="radio" value="dice" name="intType">Dice<br>
<input id="intType" type="radio" value="teleport" name="intType">Teleporter<br>
(More Interaction Types Coming in v2.0)<br>
</fieldset>
<fieldset>
How many interactions does the furniture have? (i.e. a dice has 6 sides and a closed side, therefore 7 interactions.)<br>
<input id="intCount" type="number"><br>
If your furniture gives out an item, what is the item's ID? 0, if none. (View external_flash_texts.txt or external_flash_texts.xml for ID #'s.)<br>
<input id="vendingID" type="number"><br>
</fieldset>
<input type="Submit" value="Generate!">
</form>
Furniture SQL:<br>
<textarea id="furniSQL" readonly="true" rows="10" cols="50"></textarea>
</body>
</html>

这是我的 JS:

// HabSQL - Online Habbo SQL Generator
// Developed by Thomas Yamakaitis - March 3, 2015
function habSQL() {
	var furniID = document.getElementById('furniID').value;
	var furniName = document.getElementById('furniName').value;
	var fileName = document.getElementById('fileName').value;
	var furniType = document.getElementById('furniType').value;
	var furniWidth = document.getElementById('furniWidth').value;
	var furniLength = document.getElementById('furniLength').value;
	var furniHeight = document.getElementById('furniHeight').value;
	var canStack = document.getElementById('canStack').value;
	var canSit = document.getElementById('canSit').value;
	var canWalk = document.getElementById('canWalk').value;
	var spriteID = document.getElementById('spriteID').value;
	var canRecycle = document.getElementById('canRecycle').value;
	var canTrade = document.getElementById('canTrade').value;
	var canSell = document.getElementById('canSell').value;
	var canGive = document.getElementById('canGive').value;
	var invStack = document.getElementById('invStack').value;
	var intType = document.getElementById('intType').value;
	var intCount = document.getElementById('intCount').value;
	var vendingID = document.getElementById('vendingID').value;
	var comma = ", ";
	var commaQuotes = "', '";
	var quoteComma = "', ";
	var commaQuote = ", '";

	document.getElementById('furniSQL').innerHTML = "INSERT INTO `furniture` (`id`, `public_name`, `item_name`, `type`, `width`, `length`, `stack_height`, `can_stack`, `can_sit`, `is_walkable`, `sprite_id`, `allow_recycle`, `allow_trade`, `allow_marketplace_sell`, `allow_gift`, `allow_inventory_stack`, `interaction_type`, `interaction_modes_count`, `vending_ids`, `is_arrow`, `foot_figure`, `height_adjustable`, `effectM`, `effectF`, `HeightOverride`) VALUES (" + furniId + commaQuote + furniName + commaQuotes + fileName + commaQuotes + furniType + quoteComma + furniWidth + comma + furniLength + comma + furniHeight + commaQuote + canStack + commaQuotes + canSit + commaQuotes + canWalk + quoteComma + spriteID + commaQuote + canRecycle + commaQuotes + canTrade + commaQuotes + canSell + commaQuotes + canGive + commaQuotes + invStack + commaQuotes + intType + quoteComma + intCount + comma + vendingID + ");";
}

我似乎无法准确指出我做错了什么。如果有人可以帮助我,将不胜感激。

谢谢!

感谢这里的一些用户!解决方案是一个错字,我相信它也是 value 而不是 innerHTML。

【问题讨论】:

  • 小心 SQL 注入 (en.wikipedia.org/wiki/SQL_injection) - 在运行 SQL 查询之前清理和验证您的输入...
  • SQL 字符串中的单引号不是引号。他们是重音。
  • 谢谢@ochi 我实际上并不打算插入它,它只是人们获取实际 SQL 并将其插入自己的数据库的工具。

标签: javascript html output


【解决方案1】:

一个简单的错字:furniId 而不是最后一行的furniID

JavaScript 区分大小写,因此如果您以不同的方式对变量名进行大写,则它是一个完全不同的变量,因此它不知道您的意思。

【讨论】:

  • @ThomasYamakaitis 那你能把答案标记为正确吗?
【解决方案2】:

你打错了:furniID 在你的最后一个元素 document.getElementById('furniSQL').value= 拼写为 furniId

【讨论】:

    【解决方案3】:

    Textareas 是按值修改的,而不是 innerHTML

    所以设置成

    document.getElementById('furniSQL').value = "INSERT INTO `furniture` (`id`, `public_name`, `item_name`, `type`, `width`, `length`, `stack_height`, `can_stack`, `can_sit`, `is_walkable`, `sprite_id`, `allow_recycle`, `allow_trade`, `allow_marketplace_sell`, `allow_gift`, `allow_inventory_stack`, `interaction_type`, `interaction_modes_count`, `vending_ids`, `is_arrow`, `foot_figure`, `height_adjustable`, `effectM`, `effectF`, `HeightOverride`) VALUES (" + furniId + commaQuote + furniName + commaQuotes + fileName + commaQuotes + furniType + quoteComma + furniWidth + comma + furniLength + comma + furniHeight + commaQuote + canStack + commaQuotes + canSit + commaQuotes + canWalk + quoteComma + spriteID + commaQuote + canRecycle + commaQuotes + canTrade + commaQuotes + canSell + commaQuotes + canGive + commaQuotes + invStack + commaQuotes + intType + quoteComma + intCount + comma + vendingID + ");";
    

    你应该很高兴。

    【讨论】:

    • 您需要在值+"'"+furniId+"'"+ 的任一侧添加单引号,然后您需要使用单独的函数转义用户可能输入的单引号。此外,您不需要在 SQL 语句中的字段标签周围加上单引号。即将('id, 'public_name'...更改为(id, public_name...
    • @TommyFilliater 感谢您的回复,但还是不行。
    • @DanielWilliams 谢谢,我在某些变量中使用了单引号,例如 var comma = ", " 和 commaQuotes = ", '" 可以吗?还是您认为我必须手动完成?
    • textarea 不在&lt;/form&gt; 标签内
    • @ThomasYamakaitis jsfiddle.net/6aswa49z 它应该可以工作,因为许多其他人已经提到 SQL 字符串存在一些问题,可能就是这样。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-09-11
    • 2018-05-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-08-23
    • 1970-01-01
    相关资源
    最近更新 更多