Как сделать функцию OnClick, которая будет изменять слово, когда пользователь щелкает его на другое слово?

0

Итак, я хочу сделать функцию OnClick в JavaScript, которая делает это так, когда пользователь нажимает на нее, она изменит слово. Есть ли replaceword() или что-то, что позволит мне это сделать? Я знаю, что это не настоящий код, но, например:

<p>Quickly <span onclick="replaceword('Surf');">Search</span> The Web!</p>

Если есть, то может ли кто-нибудь сказать мне также, как можно изменить код? Поэтому, когда они нажмут на него второй раз, он вернется к "Поиск"?

  • 0
    Нет, HTML не имеет функций.
  • 0
    Этот вопрос кажется не по теме, потому что пользователь не пытался решить проблему сам.
Теги:
function
onclick
replace

4 ответа

0
Лучший ответ

Нет, нет никакой нативной функции, но вы можете создавать самостоятельно.

function replaceword(that, word, oword) {
    that.textContent = that.textContent == oword ? word : oword;
}

Вы можете назвать это следующим образом:

<p>Quickly<span onclick="replaceword(this,'Surf','Search');">Search</span>The Web!</p>

Демо- версия: http://jsfiddle.net/t6bvA/6

Поделиться
  • 0
    Это помогло больше всего. Спасибо.
  • 0
    Я новичок в том, чтобы иметь учетную запись здесь, хе ... Так как мне это сделать?
Показать ещё 11 комментариев
1

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

<p>Hello, <span data-values="World,People,Stack Overflow">World</span>.</p>

Я поместил все возможные значения в атрибут data-values. Каждое отдельное значение отделено от других значений запятой. Мы будем использовать это для создания массива следующих значений:

// Leverage event-delegation via bubbling
document.addEventListener( "click", function toggleWords ( event ) {
    // A few variables to help us track important values/references
    var target = event.target, values = [], placed;
    // If the clicked element has multiple values
    if ( target.hasAttribute( "data-values" ) ) {
        // Split those values out into an array
        values = target.getAttribute( "data-values" ).split( "," );
        // Find the location of its current value in the array
        // IE9+ (Older versions supported by polyfill: http://goo.gl/uZslmo)
        placed = values.indexOf( target.textContent );
        // Set its text to be the next value in the array
        target.textContent = values[ ++placed % values.length ];   
    }
});

Результаты:

Изображение 174551

Вышеприведенное прослушивание кликов по document. Существует множество причин, по которым это хороший вариант:

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

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

Существуют и другие преимущества для этого кода:

  • Логика отделена от разметки
  • Масштабировать любое количество значений без корректировки JavaScript.

Демонстрация доступна для просмотра в Интернете: http://jsfiddle.net/7N5K5/2/

Поделиться
0

Вы можете попробовать что-то вроде этого, если хотите использовать jQuery

http://jsfiddle.net/R3Ume/2/

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<body>

<p>Hello <a id='name'>John<a></p>
<input id="clickMe" type="button" value="replace" onclick="onClick();" />

<script>
function onClick() {    
    $('#name').text('world');
}
</script>
Поделиться
0 
    <p id="abc">Hello</p>
    <input type="submit" name="Change" onclick="change()">



function change(){
var ab=document.getElementById('abc').value;
ab.innerHTML="Hi, Bye";
}

Я думаю, что это должно помочь вам, вы должны пойти на сайт, такой как w3schools.com, его базовый, и он ответит на ваши сомнения

Поделиться
  • 0
    Спасибо вам большое!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню