Я использую html и имею две кнопки. Я хочу, чтобы эти кнопки имели разные выходные данные функции typeWriter ()

Question

Имейте в виду, что я новичок. Было бы очень полезно, если бы вы могли избежать сложной терминологии. Проблема в том, что я не могу дать кнопкам c функции. Я пробовал использовать идентификатор и имя. Я думал, что было бы проще, если бы у меня был эффект пишущей машинки go после уже существующего текста, но он не работал, и оба ввода (кнопки) использовали вторую команду. Все, что мне действительно нужно, это способ связать кнопки с определенной функцией c.
Первоначально я не планировал использовать метод с 1 и 2, поэтому, если у вас есть метод, который представляет собой только пишущую машинку, подойдет и для меня.

var i = 0
var x = document.getElementById("button1")
var txt = 'button 1';
var speed = 80;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("button1").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}[]
var i = 0
var x = document.getElementById("button2")
var txt = 'button 2';
var speed = 80;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("button2").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}[]

<div id="container">
  <h1>name</h1>
  <button style="font-size:25px" onclick="typeWriter()" id="#button1">button number 
    1</button>
  <button style="font-size:25px" onclick="typeWriter()" id="#button2">Button number 2</button>
  <h1 id="button1"> l</h1>
  <h1 id="button2"> 2 </h1>
  <h3 style="color:white;"></h3>

Answer 1

Поскольку вы новичок в программировании, я постараюсь ответить на этот вопрос как можно яснее. Ниже вы найдете a решение вашего вопроса, но обратите внимание, что есть много других возможных (и, возможно, лучших) решений, которые вы могли бы придумать.

Большинство изменений в javascript код объяснен в комментариях, которые соответствуют конкретным строкам, но есть несколько вещей, которые я хочу сначала объяснить:

• Я изменил ваше использование var на let или const. Это способы объявления переменных, представленные в одной из последних версий JavaScript, и, по сути, они являются более безопасными способами объявления переменных, чем var. Основное различие между let и const заключается в том, что переменные, определенные с помощью ключевого слова const, являются константой , что означает, что им нельзя присвоить другое значение позже в коде. Это нормально для переменных txt, speed и button, поскольку вам не нужно изменять их позже, но обратите внимание, что для i, который вы меняете в основной функции записи, которую я использовал let, сообщая движку, что это переменная, которая должна измениться. Однако это в основном дело личных предпочтений, и вместо него можно использовать var.

• Я не уверен, знакомы ли вы с параметрами, но, по сути, они позволяют вам передавать значения в функцию, чтобы изменить ее поведение. Они определены в круглых скобках («(...)») после имени функции и могут затем использоваться в любом месте тела этой функции. В этом примере я использую их для передачи номера кнопки, чтобы я мог использовать этот номер для адаптации текста и получения соответствующего элемента. Обратите внимание, что в коде HTML я передаю номера 1 и 2 функции в дескрипторе onclick, чтобы сделать именно это

/**
 * Run a typewriter effect for the element associated with the index parameter passed 
 * into the function. 
 * 
 * @param {Number} index The index of the element to associate the animation with
 */
function typeWriter(index) {
    let i = 0

    // I use the ` symbol here as it allows me to insert a varibale into the string.
    // When I then surround [index] with ${} it tells the engine to grab the current
    // value of the [index] variable and replace the "${index}" definition with its 
    // current value. That way this line generates a different text based on what 
    // index is passed in as a parameter
    const txt = `button ${index}`;
    const speed = 80;

    // The logic for using the backticks (`) and the ${} here is the same as in the 
    // "const txt = " line above. Inserting the current value of index into the string
    // means that this line fetches a different element based on what is provided as the
    // index parameter of the function. 
    const button = document.getElementById(`button${index}`)
    
    // Since the above line gets the element dynamically based on the input it is possible
    // that the input will not correspond to an element. If that's the case then button 
    // will be [null] and we want to just bail out of this whole function and not do 
    // anything else
    if (!button) { return }

    // Here I reset the innerHTML of the element. It's up to you if you want to do this
    // or just keep adding to the text already in the element, but I found this visually 
    // more pleasant. 
    button.innerHTML = ""

    // Here I just wrapped the code you had in the [typewriter] function before inside a 
    // new nested function so that you can still call it from the [setTimeout] call
    function writeLetter() {
        // As above we first ensure that [button] is a valid element before we do 
        // anything else.
        if (!button)  { return };

        if (i < txt.length) {
            button.innerHTML += txt.charAt(i);
            i++;
            setTimeout(writeLetter, speed);
        }
    }

    // Here I just need to call the above defined function once to kick off the 
    // writing effect.
    writeLetter()
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typewriter</title>
</head>
<body>
<div id="container">
  <h1>Typewriter</h1>
  <button style="font-size:25px" onclick="typeWriter(1)" id="#button1">button number 1</button>
  <button style="font-size:25px" onclick="typeWriter(2)" id="#button2">Button number 2</button>
  <h1 id="button1">1</h1>
  <h1 id="button2">2</h1>
</div>

Надеюсь, это было полезно. Конечно, если у вас есть какие-либо вопросы, не стесняйтесь комментировать мой пост, и я или кто-то другой постараюсь ответить. Удачи в карьере программиста :)

- Jakub

Answer 2

Вместо создания функции для каждой кнопки вы можете повторно использовать ту же функцию и передать ей текст и целевой элемент, например:

const speed = 80;

function typeWriter(elementId, text, i = 0) {
  const element = document.getElementById(elementId)
  if (i < text.length) {
    element.innerHTML += text.charAt(i);
    setTimeout(() => typeWriter(elementId, text, ++i), speed);
  }
}

<div id="container">
  <h1>name</h1>
  <button style="font-size:25px" onclick="typeWriter('button1', 'some text for button 1')" id="#button1">button number 
    1</button>
  <button style="font-size:25px" onclick="typeWriter('button2', 'some text for button 2')" id="#button2">Button number 2</button>
  <h1 id="button1">l </h1>
  <h1 id="button2">2 </h1>
  <h3 style="color:white;"></h3>

Answer 3

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

Примерно так:

    function toButton1() {
      typeWriter('button 1', 'button 1', 0, 80);
    }

    function toButton2() {
      typeWriter('button 2', 'button 2', 0, 80);

    }

    function typeWriter(id, txt, i, speed) {
      if (i < txt.length) {
        document.getElementById(id).innerHTML += txt.charAt(i);
        i++;
        setTimeout(typeWriter(id, txt, i, speed), speed);
      }
    }

    <button style="font-size:25px" onclick="toButton1()">button number 1</button>
    <button style="font-size:25px" onclick="toButton2()">Button number 2</button>
    <h1 id="button1"> l</h1>
    <h1 id="button2"> 2 </h1>

Live Demo: https://stackblitz.com/edit/js-ge9sm8

Answer 4

Хорошо, я думаю, вы хотите, чтобы определенный текст, каким-то образом связанный с определенной кнопкой, «печатался» в тегах h1, как пишущая машинка. Дайте мне знать, если это что-то еще. Если это так, вам нужно добавить параметры к функции вместо того, чтобы определять ее дважды, как показано ниже:

function doTheTyping(id, txt) {
  var speed = 80;
  var i = 0
  var el = document.getElementById(id);
  function typeWriter() {
    if (i < txt.length) {
      el.innerHTML += txt.charAt(i);
      i++;
      setTimeout(typeWriter, speed);
    }
  }
  if(el) typeWriter();
}

$button1.onclick = function() {
  doTheTyping("button1", "button 1");
};

$button2.onclick = function() {
  doTheTyping("button2", "button 2");
};

<div id="container">
  <h1>name</h1>
  <button style="font-size:25px" id="$button1">button number 
    1</button>
  <button style="font-size:25px" id="$button2">Button number 2</button>
  <h1 id="button1"> l </h1>
  <h1 id="button2"> 2 </h1>
  <h3 style="color:white;"></h3>
  </div>

параметр подобен переменной, которая изменяется для каждой функции. Обратите внимание, что теперь есть родительская функция doTheTyping, у которой все переменные (особенно i) сброшены, и внутри этой функции запускается setTimeout (и увеличивается i), но до того, как i увеличивался одной из кнопок, и к тому времени, когда это было сделано, другие уже не работали.

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

Еще я заметил, что самим кнопкам были присвоены идентификаторы, но они никогда не использовались, поэтому в целом события onclick были перемещены в тег JavaScript, чтобы придать некоторую гибкость, вместо того, чтобы иметь все в кавычках на самой странице HTML Дайте мне знать, если у вас есть какие-либо вопросы