JavaScript / HTML - Передача параметра кнопки onclick в функцию JavaScript - PullRequest
0 голосов
/ 15 апреля 2020

Я очень новичок в JavaScript, поэтому я прошу прощения, если у этого вопроса есть чрезвычайно очевидный ответ. Я пытаюсь передать имя текстового поля в HTML функции в Javascript с помощью кнопки onclick. Цель функции - проверить заданную строку и выделить ее на основе определенных параметров (для моего тестирования это просто длина).

В функциях, над которыми я знаком и работаю, есть несколько странных разногласий, я знаю, что эти функции работают так, как когда я удаляю параметры и вызываю текстовое поле кода напрямую, оно печатает именно то, что я ожидайте этого. Но я хочу иметь возможность передавать несколько текстовых полей без необходимости указания c функции для каждого блока.

У меня есть следующий код. Я включил все это в случае, если ошибка была сделана где-то, я не ожидал, что это будет.

<!DOCTYPE html>
<html>
    <head>
        <style>
        .highlight {
        background-color: yellow;
        }
        </style>
    </head>
<body>

<label for="wordOne">Word One</label><br>
<input type="text" id="wordOne" name="wordOne"><br>
// Pass the value for the wordOne textbox to verify function
<button type="button" onclick="verify(wordOne,this)">Check</button><br><br>

<label for="wordTwo">Word Two</label><br>
<input type="text" id="wordTwo" name="wordTwo"><br>
// Pass the value for the wordTwo textbox to verify function
<button type="button" onclick="verify(wordTwo,this)">Check</button><br><br>
<p id="test"></p><br>
<p id="error"></p>

<script>
    // Highlights any code in a given line.
    function highlight(text,id,begin,end) {

        // document.getElementById("error").innerHTML = "TEST";

        var inputText = document.getElementById(id);
        var innerHTML = inputText.innerHTML;
        var index = innerHTML.indexOf(text)+begin;
        if (index >= 0) { 
            innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length-end);
        inputText.innerHTML = innerHTML;
        return string;
        }
    }
    function verify(button,el){
        var begin=1;
        var end=1
        var id="test";
        var string = document.getElementById(button).value; 
        var len=string.length;
        if(len>5)
        {
            document.getElementById(id).innerHTML = string +" "+len;
            highlight(string,id,begin,end);  
        }
        else
        {
            document.getElementById(id).innerHTML = string;
        }
    }
</script>

</body>
</html> 

Я еще раз извиняюсь, если это чрезвычайно очевидно, но я честно не уверен, что я ' Я делаю неправильно. Заранее спасибо за любую помощь!

1 Ответ

0 голосов
/ 15 апреля 2020

Вы можете получить имя textbox по атрибуту

var x = document.getElementsByTagName("INPUT")[0].getAttribute("name"); 

, а затем использовать его в своей функции как

var x = document.getElementsByTagName("INPUT")[0].getAttribute("name"); 
 function highlight(x,id,begin,end) {

        // document.getElementById("error").innerHTML = "TEST";

        var inputText = document.getElementById(id);
        var innerHTML = inputText.innerHTML;
        var index = innerHTML.indexOf(text)+begin;
        if (index >= 0) { 
            innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length-end);
        inputText.innerHTML = innerHTML;
        return string;
        }
    }

ПРИМЕЧАНИЕ: [0] означает первое текстовое поле.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...