我正在尝试使div具有与输入完全相同的内容。如果在输入中键入“ lalala”，则希望它显示在div中。那部分工作正常。但是我也想在div中显示一些类似“输入为空”的内容。
基本上就像
输入= blablabla div = blablabla
输入= div =输入为空
我正在尝试使其“如果为空，则执行此操作，否则，请显示与输入相同的内容”。但是由于某种原因，空白位不起作用。
const textInput = $('#input');
const textOutput = $('#output');
if ( textInput.value == "" ) {
textOutput.innerHTML += 'It's empty';
} else {
textInput.on("input",function() {
textOutput.text($(this).val());
});
}
});```
'It's empty'中有一个引号。innerHTML ===来比较相等性。
const input = document.querySelector('#input');
const output = document.querySelector('#output');
input.addEventListener('input',() =>
output.textContent = input.value ? input.value : "It's empty.");<input id="input">
<div id="output"></div>,
除了字符串中的“撇号”之外，您还将Vanilla Javascript与JQuery混合在一起，并且触发器位于if（）块中，该块应该在触发器上调用。
像这样更改代码：
const textInput = $('#input');
const textOutput = $('#output');
textInput.on("input",function() {
if ( $(this).val() === "" ) {
textOutput.html('It\'s empty');
} else {
textOutput.html($(this).val());
}
});
if ( textInput.value == "" ) {
textOutput.innerHTML += 'It\'s empty';
} else {
textInput.on("input",function() {
textOutput.text($(this).val());
});
}
更好的话：
if (!textInput.value) {
textOutput.innerHTML = 'It\'s empty';
} else {
textInput.on("input",() => textOutput.text($(this).val()));
}
简短：
!textInput.value ? textOutput.innerHTML = 'It\'s empty' : textInput.on("input",() => textOutput.text($(this).val()));
在使用jQuery时：
textInput.value == ""应该是! textInput.val() textOutput.innerHTML = 'it's empty'应该是textOutput.text("it's empty"); textOutput.text($(this).val());应该是textOutput.text(textInput.val()); ，并且都应该位于on "input"侦听器之内，即
textInput.on('change',function(){ /*code goes here*/ });
有你去
const $textInput = $('#input');
const $textOutput = $('#output');
$textInput.on('input',function(){
if($textInput.val() != '') {
$textOutput.text($textInput.val());
}
else {
$textOutput.text('It\'s empty');
}
});