Nagashree N Ответов: 3

Автоматизация банковского кредита DAC

Я новичок.Я должен написать код java-скрипта для отображения "Thank you <customername>. Ваш сумма кредита объемкредита&ГТ;" в тег div с идентификатором "результат"

Что я уже пробовал:

<html>
    <head>
        <style>
            body
            {
                background-color:#FFAACC;
            }
            h1{
                color:#770080;
                font-family:cursive;
                text-align:center;
            }
            #result
            {
                font-weight:bold;
                color:#770080;
            }
        </style>
    </head>
    <body>
        <h1>DAC BANK - AVAIL LOAN</h1>
        <form onsubmit="">
            <table>
                <tr>
                    <td>Customer Name</td>
                    <td><input type="text" name="customerName" id="nam" required></td>
                </tr>
                <tr>
                    <td>Address</td>
                    <td><textarea rows="5" cols="20" name="customerAddress" id="addr"></textarea></td>
                </tr>
                <tr>
                    <td>Gender</td>
                    <td><input type="radio" name="gender" value="male">Male
                        <input type="radio" name="gender" value="female">Female</td>
                </tr>
                <tr>
                    <td>Email ID</td>
                    <td><input type="email" name="customerEmail" id="email"></td>
                </tr>
                <tr>
                    <td>Mobile Number</td>
                    <td><input type="text" name="customerMobileNumber" id="mob"></td>
                </tr>
                <tr>
                    <td>Date of Birth</td>
                    <td><input type="date" name="dob" id="dob"></td>
                </tr>
                <tr>
                    <td>Loan Type</td>
                    <td><input name="loanType" list="loan" autocomplete="on">
                    <datalist id="loan">
                        <option value="Vehicle">Vehicle</option>
                        <option value="Home">Home</option>
                        <option value="Education">Education</option>
                    </datalist></td>
                </tr>
                <tr>
                    <td>Loan Amount</td>
                    <td><input type="text" name="loanAmount" placeholder="Enter the Amount" id="amt" required></td>
                </tr>
                <tr>
                    <td>Tenure</td>
                    <td><input type="number" name="loanTenure" id="loan" min="1" max="5"></td>
                </tr>
                <tr>
                    <td><input type="submit" name="submit" value="Avail Loan"></td>
                    <td><input type="reset" name="reset" value="reset"></td>
                </tr>
            </table>
        </form>
        <div id="result"></div>
        <script>
            function display()
            {
                var name=document.getElementByName("customerName")[0].value;
                var amount=document.getElementByName("loanAmount")[0].value;
                
                
              document.getElementById("result").innerHTML="Thank you"+name+"Your Loan Amount is"+amount; 
                
            }
        </script>
    </body>
</html>

Я получаю ошибку:
Ошибка 1 - Проверьте с помощью кода Javascript или проверьте с помощью требований пользовательского интерфейса клиента

MadMyche

Я никогда не видел этой ошибки "Fail 1"..... В любом случае, что отображается, когда вы запускаете это?

Richard MacCutchan

Я подозреваю, что сообщение об ошибке исходит от учителя.

3 Ответов

Рейтинг:
1

Andre Oosthuizen

Перво-наперво, особенно для других читателей в будущем -

Используйте функцию проверки в браузере, чтобы увидеть, где ваш код вызывает ошибку. Вы можете прочитать больше о проверке элемента ЗДЕСЬ который охватывает основы. В качестве примечания от них, что такое инспектировать элемент?

There's a powerful tool hiding in your browser: Inspect Element.

Right-click on any web page, click Inspect, and you'll see the innards of that site: its source code, the images and CSS that form its design, the fonts and icons it uses, the Javascript code that powers animations, and more. You can see how long the site takes to load, how much bandwidth it used to download, and the exact colour in its text.

Or, you could use it to change anything you want on the page.

Inspect Element is a perfect way to learn what makes the web tick, figure out what's broken on your sites, mock up what a colour and font change would look like


Как только у вас есть основы, используйте инструмент в своих интересах. Когда вы откроете инспекцию, вверху нажмите на кнопку сеть. Он попросит вас (Chrome и Edge, не уверен в других браузерах) выбрать CTRL + R для запуска ваших страниц/кода.

После этого, если есть какие-либо ошибки, вы увидите предупреждение, нажмите на ссылку страницы, и элемент Inspect выделит строку кода для вас.

Возвращаясь к вашему коду, я вижу здесь несколько проблем, вы выбрали только первую строку, что произойдет, когда другие пользователи выберут другие строки, как ваш код будет знать, какая строка выбрана и какие данные возвращать, или всегда будет только одна строка с входными элементами, вложенными в строку, см. Мой комментарий ниже?

Я бы предложил вам ОЗНАКОМЬТЕСЬ С ДОКУМЕНТАЦИЕЙ из таблиц данных, чтобы понять, насколько он действительно силен.

Начните заново, дайте вашему столу какое-нибудь осмысленное описание -
<table id="mytable" name="mytable" class="mytable">

Затем создайте несколько заголовков для этой таблицы -
<pre><thead>
    <tr>
	<th>ID</th>
	<th>Customer Name</th>
	<th>Address</th>
	<th>Gender</th>
	<th>Email ID</th>
	<th>Mobile Number</th>
	<th>Date of Birth</th>
	<th>Loan Type</th>
        <th>Loan Amount</th>
        <th>Tenure</th>
        <th>Action</th>
    </tr>
</thead>


Теперь создайте свои строки из данных или входных данных, как вы это сделали. (Я не уверен, почему вы используете таблицу для отображения обычных входных элементов на своей странице, вы должны вложить их в divs или что-то подобное...), обратите внимание, что я удалил ваши заголовки.
<pre><tbody>
<tr> 
<div class="searchstuff">                   
        <td>
<input type="text" name="customerName" id="nam" required></td>                       
        <td><textarea rows="5" cols="20" name="customerAddress" id="addr"></textarea></td>                        
        <td>
<input type="radio" name="gender" value="male">Male
            <input type="radio" name="gender" value="female">Female</td>
<td><input type="button" class = "submit" name="submit" value="Avail Loan"></td>
                    <td><input type="reset" name="reset" value="reset"></td>
        </div>
</tbody>

И так далее со всеми элементами.Обратите внимание, что я добавил div с именем класса для каждой строки кнопки (submit changed to button for use in the script find function), чтобы таблица знала, какая строка была выбрана.

После этого вам нужно выполнить некоторую базовую проверку, чтобы проверить, что каждое значение было введено пользователем, которое я пока не буду здесь рассматривать, ЧИТАТЬ ЭТО для получения более подробного объяснения и примеров кода.
Есть также несколько очень хороших статей ЗДЕСЬ НА CODEPROJECT.

После завершения проверки верните данные из строки таблицы, выбранной пользователем, используя идентификатор соответствующего входного элемента -
$ = jQuery;

	<script type="text/javascript">
	String.prototype.trim = function () {
		return this.replace(/^\s+|\s+$/g, "");
	}

var table = $('#mytable').DataTable();

//Change your submit buttons to normal buttons...
$('#mytable').on('click', 'button', function () {
	var name = $(this).parents('tr').find('.searchstuff input[id="nam"]').val();
				var amount = $(this).parents('tr').find('.searchstuffinput[id="loanamount"]').val();

//Now that you have the crows detail, do with it as you require, I am just using alert... -
alert(Thank you" + name + "Your Loan Amount is" + amount + ".");
//Note the spaces in between each variable call...
});


Это всего лишь краткое резюме того, как обрабатывать таблицы данных, если этот f\не работает для вас, вернитесь к моему комментарию выше, используйте обычные div для размещения ваших элементов.

Рейтинг:
0

Richard Deeming

Цитата:
document.getElementById("result").innerHTML="Thank you"+name+"Your Loan Amount is"+amount;
Вы только что ввели в свой код уязвимость межсайтового скриптинга (XSS).
Межсайтовый скриптинг (XSS) | OWASP[^]

Вам необходимо правильно кодировать вводимые пользователем данные, прежде чем добавлять их в документ.

Либо измените код, чтобы установить innerText:
document.getElementById("result").innerText = "Thank you " + name + " Your Loan Amount is " + amount;
Или использовать библиотеку типа mathiasbynens/он[^] для кодирования пользовательского ввода.

Рейтинг:
0

Richard MacCutchan 

document.getElementById("result").innerHTML="Thank you"+name+"Your Loan Amount is"+amount;

Посмотрите на ответ, который вы генерируете, там нет пробелов до и после имени и суммы. Таким образом, сгенерированное сообщение будет выглядеть примерно так:
Thank youNagashreeYour Loan Amount is1500