Есть ли способ объединить функции для этой простой задачи?

Question

Я новичок ie и мне было интересно, вместо того, чтобы писать это на двух отдельных строках, как здесь, можно ли объединить свойства innerHTML и style вместе в одной строке? Или есть более лаконичный способ написать это?

Я знаю, что это плохой пример и никогда не будет использоваться. Я просто пытаюсь выяснить, есть ли способ объединить innerHTML и style (или любые другие функции) в одну строку вместо двух document.getElementById.

function myFunction() {
  document.getElementById('test').innerHTML = 'Show this text';
  document.getElementById('test').style = 'display:block';
}

#test {
  display: none;
}

<p id="test"></p>
<button onclick="myFunction()">Click me</button>

Answer 1

Вы можете взять возврат элемента с помощью

ele = document.getElementById('test')

, затем

ele.innerHTML='Show this text';
ele.style='display:block';

Но что касается вашего вопроса, нет, не без воссоздания элемента, о котором я знаю

Answer 2

Вы можете немного очистить его, сохранив результат getElementById в переменной и используя атрибут hidden ( поддержка браузера , могут быть полифиллы для браузеров, которые его не поддерживают ):

<script>
function myFunction() {
    const test = document.getElementById('test');
    test.textContent = 'Show this text';
    test.hidden = false;
}
</script>

<p id="test" hidden></p>

<button onclick="myFunction()">Click me</button>

Answer 3

В основном вы все делаете правильно, однако вы можете позвонить на document.getElementById только один раз:

const testElement = document.getElementById('test');
testElement.innerHTML='Show this text';
testElement.style.display = 'block';