Как скрыть и увидеть текстовое содержимое на основе какого-либо значения?

Question

Как написать код HTML и Javascript.
У меня есть два текстовых контента, таких как (Привет, привет, как ты?) & (Мне 5 лет, а ты?).

Когда приходит значение 3, нужно показать 1-й контент (Привет, привет, как дела).

Если не приходит значение 3, нужно показать второй контент (я 5n как насчет вас) ..

Спасибо.

Answer 1

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

1. Ввод из вызова API, с двумя div для двух выходных:

HTML:

<div id="when3" class="hide">Hi, hlo how are you</div>
<div id="not3" class="hide">l'm 5n what about you</div>

CSS:

/* Hide block */
.hide {
    display: none
}

JS:

let value = 3; //use user input here

function show() {
    if (value === 3) {
       document.getElementById("when3").classList.remove("hide");
       document.getElementById("not3").classList.add("hide");
    } else {
       document.getElementById("not3").classList.remove("hide");
       document.getElementById("when3").classList.add("hide");
    }
}

show();

2. Когда необходимо изменить значение одного и того же элемента на основе некоторого ввода, нет двух разных элементов:

HTML:

<div id="output"></div>

JS:

let value = 3; //use user input here

function show() {
    if (value === 3) {
       document.getElementById("output").innerHTML = "Hi, hlo how are you";
    } else {
       document.getElementById("output").innerHTML = "l'm 5n what about you";
    }
}

show();

3. Показать / Скрыть HTML <div> на основе некоторых кликов. Используется для навигации.

HTML:

<ul>
   <li onclick="show('profile')">Profile</li>
   <li onclick="show('friends')">Profile</li>
   <li onclick="show('messages')">Profile</li>
</ul>
<div id="profile" class="hide">Profile Details</div>
<div id="friends" class="hide">Friends</div>
<div id="messages" class="hide">Messages</div>

CSS:

/* Hide block */
.hide {
    display: none
}

JS:

function show(id) {
    hideAll();
    let element = document.getElementById(id);
    element.classList.remove("hide");
}

function hideAll() {
    document.getElementById("profile").classList.add("hide");
    document.getElementById("friends").classList.add("hide");
    document.getElementById("messages").classList.add("hide");
}

Answer 2

HTML

<input type="text" id="txt"/><br/>
<input type="button" name="go" onClick="result()" value="send"/><br/>
<div id="msg"> </div>

JavaScript

function result(){
var test = document.getElementById("msg"); 
var value=document.getElementById("txt");

if(value === 3)
{
 test.innerHTML = "Hi, Hlo how are you";
}
else
{ 
 test.innerHTML = "l'm 5n what about you";
 }
 }

Answer 3

Как то так должно работать

function showText(val, id) {
 document.getElementById(id).innerHTML = val == 3 ? "Hi, Hlo how are you" : "l'm 5n what about you";
}
showText(3, 'text');
showText(4, 'text1');

<div id="text"></div>

<div id="text1"></div>

Answer 4

HTML:

<div id="sample"></div>

JS:

var test = document.getElementById("sample");
var value;

if(value === 3){
 test.innerHTML = "Hi, hlo how are you";
}
else{
 test.innerHTML = "l'm 5n what about you";
}