I have div with "Hey". That changes to "Are you ok?" when i click on it. But I want to contiue having more texts. How can I make it so that when I click the "Are you ok" another text appears, and so on...
HTML:
$(document).ready(function () {
$("#fold").click(function () {
$("#fold_p").text("Are you ok?");
} )
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><div id="fold">
<p id="fold_p">Hey</p>
</div>
Also, is it possible to make the last text a link? Any help is much appreciated.
Thank you
Here you go! Simply create an array like described in the comments!
var text = ["Hi","One","Two","Three","Four"]
$(document).ready(function () {
var index = 0;
$("#fold").click(function () {
index++;
$("#fold_p").text(text[index]);
} )
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><div id="fold">
<p id="fold_p">Hey</p>
</div>
I'd use an array and then shift the array in order to have different blurbs to spit out.
$(document).ready(function () {
textList = ["Are you okay?", "Well that's cool.", "I like puppies"];
$("#fold").click(function () {
$("#fold_p").text(textList.shift());
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><div id="fold">
<p id="fold_p">Hey</p>
</div>
We can achieve both functionality in jQuery as well as in JavaScript.
Dynamic text change on click of previous displayed text.
last text as a link
Using JavaScript
var text = ["First","Second","Third","Fourth"]
var index = 0;
document.getElementById("fold").onclick = function() {
index++;
if(index < text.length) {
if(index == text.length-1) {
document.getElementById("fold_p").innerHTML = ''+text[index]+'';
} else {
document.getElementById("fold_p").innerHTML = text[index];
}
}
}
<div id="fold">
<p id="fold_p">Hey</p>
</div>
Using jQuery
var text = ["First","Second","Third","Fourth"]
var index = 0;
$("#fold").click(function () {
index++;
if(index < text.length) {
if(index == text.length-1) {
$("#fold_p").html(''+text[index]+'');
} else {
$("#fold_p").text(text[index]);
}
}
})
<div id="fold">
<p id="fold_p">Hey</p>
</div>
Related
Hello I am creating an FAQ page that has to be filtered using javascript as below
Credit : https://makitweb.com/jquery-search-text-in-the-element-with-contains-selector/
$(document).ready(function () {
$('#filter').keyup(function () {
// Search text
var text = $(this).val().toLowerCase();
var error = document.getElementById("error");
// Hide all content class element
$('.mobrog-ux-text').hide();
// Search
$('.mobrog-ux-text').each(function () {
if ($(this).text().toLowerCase().indexOf("" + text + "") != -1) {
$(this).closest('.mobrog-ux-text').show();
setTimeout(
function () {
var x = document.getElementById("myDIV");
x.style.display = "none";
}, 4000);
error.style.display = "none";
}
else if($(this).text().toLowerCase().indexOf("" + text + "") == 0) {
error.style.display = "block";
}
});
});
});
<form align="center">
<input id="filter" onkeydown="keydownFunction()" oninput="keyPress(this.value)" class="searchfield" type="text"
name="search" placeholder="Search the help center">
</form>
<div style="color: white;padding : 10px" align="center"></div>
</div>
<div class="content2">
<h2>Frequently asked questions</h2>
<div id"pag"="id" pag""="pag" ""></div>
<div align="center" class="col-10">
<div class="mobrog-tab-container maxwidth">
<div id="myDIV" class="loader"></div>
<div class="error" id="error"> No result found!!</div>
<div id="results" class="mobrog-ux-vertical-tabs">
<div id="tar" class="mobrog-tabs">
<button data-tab="tab1" class="active">sample tab button?<span></span></button>
<button class="empty"></button>
</div>
<div class="mobrog-maincontent">
<div data-tab="tab1" class="mobrog-tabcontent active">
<div class="mobrog-ux-text">
<button class="mobrog-accordion">sample button</button>
<div class="mobrog-panel">
<p>
sample text
</p>
</div>
</div>
Which works, but then I am trying to show a message when the filtered word is not found within the list of DIVS I'm searching through on my FAQ page
I tried the below with
else if ($(this).text().toLowerCase().indexOf("" + text + "") == 0) {
//error message display
}
But then it does not work
(e.g when I type in a word which does not exist within my FAQ I want to display an error message which is in a div) and vice versa when the word is found in my FAQ page)
like the way its been used in the method of RegExp
Live search on an Div with input filter
at the moment when I type in available and unavailable words the error message appears
Please how do I effectively display a message when a filtered word is found or not found
Thanks
Expanding on my comment, this is an example of how you could implement something like this.
To reiterate - the main problem was that the error was being shown if any result didn't match instead of showing if none match
To fix that, we can add a variable outside the loop to determine if any result was matched
$(document)
.ready(function () {
$('#filter')
.keyup(function () {
// Search text
var text = $(this).val().toLowerCase();
var error = document.getElementById("error");
// storing this in a variable will reduce how many times you call the function
var $ux_texts = $('.mobrog-ux-text');
// Hide all content class element
$ux_texts.hide();
// variable to update if any match is found
var has_match = false;
// Search
$ux_texts
.each(function () {
var $this = $(this);
if ($this.text().toLowerCase().indexOf("" + text + "") === -1) {
// flip the logic so we can return early - makes for cleaner code
return;
}
$this.closest('.mobrog-ux-text').show();
setTimeout(function () {
var x = document.getElementById("myDIV");
x.style.display = "none";
}, 4000);
has_match = true;
});
// error handling
if (has_match) {
error.style.display = "none";
} else {
error.style.display = "block";
}
});
});
HTML:
<div class="col answer">
some text
</div>
js:
$(".answer").text("Here we change the text" );
$(".answer").click(function(E) {
console.log(E).html();
});
console output : undefined
You need to use $(this).html() not (E).html(). Your code should look like this:
console.log($(this).html());
Demonstration:
$(".answer").text("Here we change the text");
$(".answer").click(function() {
console.log($(this).html());
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="col answer">
some text
</div>
Since this was also posted in Javascript here's a vanilla option to do the same:
<div class="col answer">
some text
</div>
<script>
var x = document.getElementsByClassName("answer");
var y;
for (y = 0; y < x.length; y++) {
x[y].innerHTML = "Here we change the text";
}
window.onload = function() {
document.addEventListener('click', function (event) {
var target = event.target;
if(target.matches('.answer')){
console.log(target.innerHTML);
}
}, false);
}
</script>
Do you need innerHTML or text?? If you need text use .text() method.
$(".answer").text("Here we change the text" );
$(".answer").off().on('click',function() {
console.log($(this).html());
});
How to write HTML and Javascript code.
I have two text content like(Hi, Hlo how are you)& (I'm 5n what about you?).
When the values comes 3 need to show 1st content(Hi, hlo how are you).
If does not come value 3 need to show second content(l'm 5n what about you)..
Thanks.
Your question is too broad to understand, where does this value come from? Is these text in same element or two different element? what you need covering few show hide use here:
Input from API call, with two div for two output:
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();
When need to change value of same element based upon some input, no two different element:
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();
Show/Hide HTML <div> based upon some clicks. Used for navigation.
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");
}
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";
}
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";
}
}
Something like this should work
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>
Guys I have an input text and when I start typing, it counts how many letters I am using. But when I clear the input value, I can't change letter counter. How can I get it?
Thanks in advance.
Jsfiddle
function count_letter() {
var len = $("#area").val().length;
$('#counter').append(len);
}
$('#area').bind('keyup', function() {
$('#counter').html('');
count_letter();
});
$('#clear-value').click(function(){
$("#area").val(" ");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="area"><br>
<div id="counter"></div><br>
<button id="clear-value">
Clear value
</button>
In the #clear-value event handler, add:
$('#counter').empty();
Which will clear the #counter element.
function count_letter() {
var len = $("#area").val().length;
$('#counter').append(len);
}
$(function() {
$('#area').bind('keyup', function() {
$('#counter').html('');
count_letter();
});
$('#clear-value').click(function(){
$("#area").val("");
$('#counter').empty(); //<<<-----
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="area"><br>
<div id="counter"></div><br>
<button id="clear-value">
Clear value
</button>
Just call your count_letter function when you clear the input value :
$('#clear-value').click(function(){
$("#area").val(" ");
$('#counter').html('');
count_letter();
});
Cleear your counter on click of clear value button.
See below in action:
https://jsfiddle.net/28bs18gq/2/
function count_letter() {
var len = $("#area").val().length;
$('#counter').append(len);
}
$('#area').bind('keyup', function() {
$('#counter').html('');
count_letter();
});
$('#clear-value').click(function(){
$("#area").val(" ");
$('#counter').html('');
});
i want to add element to div in angularjs. so write this code but not work correctly. thanks for your help :)
function TestController($scope) {
$scope.addElement = function(){
var myElements = angular.element(document.querySelector('#form'));
console.log(myElements);
if(myElements.length == 0)
alert("Not Find");
else
myElements.prepend( myElements[0].children[1]);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController" id="form">
<input type="button" ng-click="addElement()" value="add"></input>
<div id="div">
<input type="text" name="name">
</div>
</div>
Here is what I have tried.
$scope.addElement = function(){
var myElements = angular.element(document.querySelector('#form'));
console.log(myElements)
console.log(myElements[0].children[1])
if(myElements.length == 0)
alert("Not Find");
else{
html = angular.element(myElements[0].children[1]).clone();
myElements.append( html);
}
You should use angular clone method.
EDIT.
Here it the Plunker
If I understood your question correctly, you want to append an input element to div on each ng-click?
You just need to target the div with jquery and append the element with it.
See example: http://jsbin.com/seyawemijo/edit?html,js,output
Often than not when you want to modify the DOM directly, there is a way to do it without.
"Thinking in Angular way"
function TestController($scope) {
$scope.textArr = [];
var count = 1;
$scope.addElement = function() {
var ele = {
model: 'hello ' + count++
}
$scope.textArr.push(ele);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController" id="form">
<input type="button" ng-click="addElement()" value="add" />
<div ng-repeat="text in textArr">
<input type="text" ng-model="text.model">
</div>
<div>{{textArr}}</div>
</div>
Try this one
myElements.prepend(myElements[0].children[1].value);
I have altered the above solution to add other attributes(including id) to the input text element
var globalCntr = 0;
function TestController($scope) {
$scope.addElement = function() {
globalCntr ++;
$('<input>',{
type:'text',
id:('inputText'+globalCntr)
}).appendTo($('#target'));
};
}