Изменение текста кнопки onclick
Когда я нажимаю кнопку myButton1, я хочу изменить значение на " Close Curtain из " Open Curtain.
HTML:
<input onclick="change()" type="button" value="Open Curtain" id="myButton1"></input>
Javascript:
function change();
{
document.getElementById("myButton1").value="Close Curtain";
}
Кнопка отображает открытую шторку прямо сейчас, и я хочу, чтобы она изменилась, чтобы закрыть шторку, это правильно?
Ответы
Ответ 1
Если я правильно понял ваш вопрос, вы хотите переключиться между "Open Curtain" и "Close Curtain" - перейдя на "открытый занавес", если он закрыт или наоборот. Если это то, что вам нужно, это сработает.
function change() // no ';' here
{
if (this.value=="Close Curtain") this.value = "Open Curtain";
else this.value = "Close Curtain";
}
Обратите внимание, что вам не нужно использовать внутреннее изменение document.getElementById("myButton1"), поскольку оно вызывается в контексте myButton1 - что я имею в виду под контекстом, который вы узнаете позже, о чтении книг о JS.
UPDATE
Я был неправ. Не так, как я сказал ранее, this не будет ссылаться на сам элемент. Вы можете использовать это:
function change() // no ';' here
{
var elem = document.getElementById("myButton1");
if (elem.value=="Close Curtain") elem.value = "Open Curtain";
else elem.value = "Close Curtain";
}
Ответ 2
Кажется, что есть только простая ошибка опечатки:
- Удалить точку с запятой после изменения(), в ней не должно быть
объявления функции.
- Добавить предложение перед объявлением myButton1.
Исправленный код:
<input onclick="change()" type="button" value="Open Curtain" id="myButton1" />
...
function change()
{
document.getElementById("myButton1").value="Close Curtain";
}
Более быстрым и простым решением было бы включить код в вашу кнопку и использовать ключевое слово this для доступа к кнопке.
<input onclick="this.value='Close Curtain'" type="button" value="Open Curtain" id="myButton1" />
Ответ 3
При использовании элемента <button> (или, может быть, других?) Установка 'value' не изменит текст, но будет произведен innerHTML.
var btn = document.getElementById("mybtn");
btn.value = 'my value'; // will just add a hidden value
btn.innerHTML = 'my text';
При выводе на консоль:
<button id="mybtn" class="btn btn-primary" onclick="confirm()" value="my value">my text</button>
Ответ 4
Есть много способов. И это должно работать и во всех браузерах, и вам больше не нужно использовать document.getElementById, поскольку вы передаете сам элемент функции.
<input type="button" value="Open Curtain" onclick="return change(this);" />
<script type="text/javascript">
function change( el )
{
if ( el.value === "Open Curtain" )
el.value = "Close Curtain";
else
el.value = "Open Curtain";
}
</script>
Ответ 5
Вам не хватает вводной цитаты на id =, и после объявления функции у вас есть точка с запятой. Кроме того, тегу ввода не требуется закрывающий тег.
Это работает:
<input onclick="change()" type="button" value="Open Curtain" id="myButton1">
<script type="text/javascript">
function change()
{
document.getElementById("myButton1").value="Close Curtain";
}
</script>
Ответ 6
это можно легко сделать с помощью кода vbs (поскольку я не очень хорошо знаком с js)
<input type="button" id="btn" Value="Close" onclick="check">
<script Language="VBScript">
sub check
if btn.Value="Close" then btn.Value="Open"
end sub
</script>
и вы закончили, однако это изменяет имя только для отображения и не изменяет функцию {onclick}, я сделал несколько исследований о том, как сделать второй, и, похоже, что нет "что-то вроде
btn.onclick = ".."
но я выяснил способ использования тега < "span" > , как показано ниже:
<script Language="VBScript">
Sub function1
MsgBox "function1"
span.InnerHTML= "<Input type=""button"" Value=""button2"" onclick=""function2"">"
End Sub
Sub function2
MsgBox "function2"
span.InnerHTML = "<Input type=""button"" Value=""button1"" onclick=""function1"">"
End Sub
</script>
<body>
<span id="span" name="span" >
<input type="button" Value="button1" onclick="function1">
</span>
</body>
попробуйте сами, измените коды в sub function1 и sub function2, в основном все, что вам нужно знать, чтобы сделать это в jscript, это строка
span.InnerHTML = "..."
остальное - ваш код, который вы хотите выполнить
надеюсь, что это поможет: D
Ответ 7
Если вы предпочитаете связывать свои события вне html-разметки (в javascript), вы можете сделать это следующим образом:
document.getElementById("curtainInput").addEventListener(
"click",
function(event) {
if (event.target.value === "Open Curtain") {
event.target.value = "Close Curtain";
} else {
event.target.value = "Open Curtain";
}
},
false
);
<!doctype html>
<html>
<body>
<input
id="curtainInput"
type="button"
value="Open Curtain" />
</body>
</html>
Ответ 8
Попробуйте это,
<input type="button" id="myButton1" value="Open Curtain" onClick="javascript:change(this);"></input>
<script>
function change(ref) {
ref.value="Close Curtain";
}
</script>
Ответ 9
<input type="button" class="btn btn-default" value="click me changtext" id="myButton1" onClick="changetext()" >
<script>
function changetext() {
var elem = document.getElementById("myButton1");
if (elem.value=="click me change text")
{
elem.value = "changed text here";
}
else
{
elem.value = "click me change text";
}
}
</script>
Ответ 10
Если вы не против или уже можете использовать jQuery, вы можете сделать это без подхода к использованию навязчивых js. Надеюсь, поможет. https://en.wikipedia.org/wiki/Unobtrusive_JavaScript Также как ссылку, fooobar.com/questions/41340/... для обсуждения этого.
HTML:
<input type="button" value="Open Curtain" id=myButton1"></input>
JavaScript:
$('#myButton1').click(function() {
var self = this;
change(self);
});
function change( el ) {
if ( el.value === "Open Curtain" )
el.value = "Close Curtain";
else
el.value = "Open Curtain";
}
Ответ 11
<!DOCTYPE html>
<html>
<head>
<title>events2</title>
</head>
<body>
<script>
function fun() {
document.getElementById("but").value = "onclickIChange";
}
</script>
<form>
<input type="button" value="Button" onclick="fun()" id="but" name="but">
</form>
</body>
</html>
Ответ 12
Это работало нормально для меня. У меня было несколько кнопок, которые я хотел переключить текст входного значения с "Добавить диапазон" на "Удалить диапазон"
<input type="button" onclick="if(this.value=='Add Range') { this.value='Remove Range'; } else { this.value='Add Range'; }" />
Ответ 13
Добавьте эту функцию в скрипт
function myFunction() {
var btn = document.getElementById("myButton");
if (btn.value == "Open Curtain") {
btn.value = "Close Curtain";
btn.innerHTML = "Close Curtain";
}
else {
btn.value = "Open Curtain";
btn.innerHTML = "Open Curtain";
}
}
и редактировать кнопку
<button onclick="myFunction()" id="myButton" value="Open Curtain">Open Curtain</button>
Ответ 14
Или более просто, не называя элемент (с элементом 'button'):
<button onclick="toggleLog(this)">Stop logs</button>
и скрипт:
var bWriteLog = true;
function toggleLog(elt) {
bWriteLog = !bWriteLog;
elt.innerHTML = bWriteLog ? 'Stop logs' : 'Watch logs';
}
Ответ 15
var count=0;
document.getElementById("play").onclick = function(){
if(count%2 =="1"){
document.getElementById("video").pause();
document.getElementById("play").innerHTML ="Pause";
}else {
document.getElementById("video").play();
document.getElementById("play").innerHTML ="Play";
}
++count;
Ответ 16
This is simple way to change Submit to loading state
<button id="custSub" type="submit" class="button left tiny" data-text-swap="Processing.. ">Submit <i class="fa fa-angle-double-right"></i></button>
<script>
jQuery(document).ready(function ($) {
$("button").on("click", function() {
var el = $(this);
if (el.html() == el.data("text-swap")) {
el.html(el.data("text-original"));
} else {
el.data("text-original", el.html());
el.html(el.data("text-swap"));
}
setTimeout(function () {
el.html(el.data("text-original"));
}, 500);
});
});
</script>
