I'm starting to study javascript, with jQuery.
I have the following code:
$(document).ready(function(){
$("#p1").click(function(){
var input = document.getElementById("p3");
if (input.value == "Hi")
{
message = "Bye";
} else {
message = "Hi";
}
$("#p3").text(message);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<p id="p1">Click on me.</p>
<p id="p2">Click on me again.</p>
<p id="p3">Click on me one more time.</p>
</div>
It works in the first click in p1, but when I click again it doesn't change to "Bye"
That's a paragraph, not an input, so .value doesn't give what you need. Instead use .textContent.
$(document).ready(function() {
$("#p1").click(function() {
var input = document.getElementById("p3");
if (input.textContent == "Hi") {
message = "Bye";
} else {
message = "Hi";
}
$("#p3").text(message);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<p id="p1">Click on me.</p>
<p id="p2">Click on me again.</p>
<p id="p3">Click on me one more time.</p>
</div>
Here's a no-jQuery version:
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("#p1").addEventListener("click", function() {
var p3 = document.getElementById("p3");
p3.textContent = p3.textContent == "Hi" ? "Bye" : "Hi";
});
});
<div id="div1">
<p id="p1">Click on me.</p>
<p id="p2">Click on me again.</p>
<p id="p3">Click on me one more time.</p>
</div>
For consistency sake, i'd looks the p3 up with jQuery and use the text() method off of it.
$(document).ready(function(){
var $p3 = $('#p3');
$("#p1").click(function(){
var message = "Hi";
if ($p3.text() === "Hi") message = "Bye";
$p3.text(message);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<p id="p1">Click on me.</p>
<p id="p2">Click on me again.</p>
<p id="p3">Click on me one more time.</p>
</div>
To begin with the if (input.value == "Hi") will always return false because input value is undefined hence always showing "Hi"
Related
I am trying to make text change to different text when a button is pressed and I'm not sure why it's not working.
<p id="test"> A </p>
<button onclick = "test()"> Click </button>
<script>
function test(){
document.getElementById("test").innerHTML = "B";
}
</script>
Use innerText insteadof innerHTML like this:
<p id="test"> A </p>
<button onclick = "test()"> Click </button>
<script>
function test(){
document.getElementById("test").innerText = "B";
}
</script>
const button = document.querySelector('.test__button');
button.addEventListener("click", test)
function test() {
document.getElementById("test").innerHTML = "B";
}
<p id="test"> A </p>
<button class="test__button"> Click </button>
I've got some simplified code of mine where I can't figure out why it won't work
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<div>
<button class="submit1">update</button>
</div>
<br>
<div>
<button class="submit2">submit</button>
</div>
<br>
<div class="result"></div>
<script>
var myvar = 1;
$(".submit1").on('click',function(){
myvar = 2;
});
if(myvar == 2){
$(".submit2").on('click',function(e){
$('.result').html("it works!");
});
};
</script>
</html>
The fact that myvar isn't 2 originally seems to essentially ignore the last part of the javascript but I don't understand why since I've never come across this kind of problem before. Any help would be appreciated!
edit(from comment): That is almost what I want, sorry I didn't specify. I have some objects that are hidden and shown and I have some more intensive code that runs when a submit button is clicked or enter is pressed on each of the hidden and shown objects. But my problem is that all of the code runs when I press enter and I tried to made an if statement to clarify which object was being shown and then only run the code if it is being shown
I can only guess, but I believe you meant to do this?
var myvar = 1;
$(".submit1").on('click', function() {
myvar = 2;
});
$(".submit2").on('click', function(e) {
$('.result').html(myvar == 2 ? "it works!":"Click update first");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div>
<button class="submit1">update</button>
</div>
<br>
<div>
<button class="submit2">submit</button>
</div>
<br>
<div class="result"></div>
Or maybe:
$(".submit1").on('click', function() {
$(".submit2").show();
});
$(".submit2").on('click', function(e) {
$('.result').html("it works!");
});
.submit2 { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div>
<button class="submit1">update</button>
</div>
<br>
<div>
<button class="submit2">submit</button>
</div>
<br>
<div class="result"></div>
A better appraoch with the existing code will be
var myvar = 1;
$(".submit1").on('click',function(){
myvar = 2;
});
$(".submit2").on('click',function(e){
if(myvar == 2){
$('.result').html("it works!");
}
});
Right and simple answer is:
var myvar = 1;
$(".submit1").on('click',function(){
myvar = 2;
});
$(".submit2").on('click',function(e){
if(myvar == 2){
$('.result').html("it works!");
});
};
I have this code snippet which is meant to return an array on click of 'button', the string converted to an array comes from $('#text-area').text();
Please help me return the array in #text-ent after 'button' click.
<div id="container">
<h1>Type Test</h1>
<div id="div-text-area">
<textarea id="text-area" ng-model="yourText" placeholder="Please enter your text here"></textarea>
</div>
<div id="text-result">{{yourText}}</div>
<div id="entities1">
<button>Get Entities</button>
<div id="text-ent"></div>
</div>
<div id="entities2">
<button>Get Keywords</button>
<div id="text-key"></div>
</div>
</div>
JS
$(document).ready(function(){
$('button').click(function() {
var getData = $('#text-area').text();
var arrayOfText = getData.split(" ");
$('#text-ent').text(arrayOfText[0]);
});
});
You are trying to get text-area value by .text() method which return inner HTML
so please try .val() which return the value of text-area
$(document).ready(function(){
$('button').click(function() {
var getData = $('#text-area').val(); //Change here
var arrayOfText = getData.split(" ");
$('#text-ent').text(arrayOfText[0]);
});
I'm building an about us page and I'm hoping to use JavaScript to show/hide/replace a DIV's content with a vision statement or a bio depending on which is clicked by the user. I'm brand new to using script, so I'm hoping there is someone who has done this before.
I currently have a button for the bio and one for the vision and while I'm able to show and hide text with no problem I have no clue how to replace the DIV so that the Bio and Vision don't show at the same time.
Here is what I have so far:
function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
<button type="button" onclick="javascript:showhide('vision')">Vision</button>
<button type="button" onclick="javascript:showhide('bio')">Bio</button>
<div id="vision" style="display: none;">
<p>This is my vision</p>
</div>
<div id="bio" style="display: none;">
<p>This is my bio</p>
</div>
I'd also like the button text to change to "Hide Bio" or "Hide Vision" depending on which is revealed as well.
If anyone could help with this it would be GREATLY appreciated for a Java Noob like me.
This is also my first time using a forum like this so any pointers or feedback is appreciated...gotta start somewhere, right?
UPDATE - I attached an image to give a better idea of what I'm try to accomplish.
There are a couple of issues with logic. If you show/hide one div, you'll still need to hide/show the second div. So you can either add more lines of code to do that.. or simply you can use one div and update its content based on the button clicked.
so you can try this:
<script>
var textStrings = {"author1": {"Vision":"this is author1 vision", "Bio":"this is author1 bio"},
"author2": {"Vision":"this is author2 vision", "Bio":"this is author2 bio"},
"author3": {"Vision":"this is author3 vision", "Bio":"this is author3 bio"}};
function showhide(element) {
reset();
var id=element.id;
var author = document.getElementById("authors").elements["authors"].value;
var flag = document.getElementById('content').innerHTML == textStrings[author][id];
document.getElementById('content').innerHTML = flag ? "" : textStrings[author][id];
element.innerHTML = flag ? id : "hide " + id;
}
function reset(){
for (var k in textStrings["author1"]){
document.getElementById(k).innerHTML = k;
}
}
function resetAuthor(){
document.getElementById('content').innerHTML = ""
reset();
}
</script>
<form id="authors">
<input type="radio" name="authors" id="author1" onchange="resetAuthor()" value="author1" checked> author 1
<input type="radio" name="authors" id="author2" onchange="resetAuthor()" value="author2"> author 2
<input type="radio" name="authors" id="author3" onchange="resetAuthor()" value="author3"> author 3
</form>
<div style="display:inline">
<button type="button" id="Vision" onclick="javascript:showhide(this)">Vision</button>
<button type="button" id="Bio" onclick="javascript:showhide(this)">Bio</button>
</div>
<div style="display: block;">
<p id="content"></p>
</div>
This code also toggles/set contents as empty if you hit the button again.
DEMO
Try to pass the this object into the inline event handler and check the content's display state to toggle the button's text,
HTML:
<button type="button" onclick="javascript:showhide('vision',this)">Vision</button>
<button type="button" onclick="javascript:showhide('bio',this)">Bio</button>
<div id="vision" style="display: none;">
<p>This is my vision</p>
</div>
<div id="bio" style="display: none;">
<p>This is my bio</p>
</div>
JS
function showhide(id,elem) {
var e = document.getElementById(id);
var cond = (e.style.display == 'block');
e.style.display = cond ? 'none' : 'block';
elem.textContent = (id == "vision") ? (cond ? "Show Vision" : "Hide Vision")
: (cond ? "Show Bio" : "Hide Bio");
}
DEMO
Try this out.
var prevPage = "";
var currPage = "";
function showhide(event) {
prevPage = currPage;
currPage = event.id.split("_")[1];
if(prevPage !== currPage){
showEle(currPage);
if(prevPage !== ''){
hideEle(prevPage);
}
} else {
toggle(currPage);
}
}
function toggle(id){
var curr = document.getElementById(id);
if(curr.style.display === 'block'){
curr.style.display = 'none';
updateBtn('btn_'+id, 'Show');
} else {
curr.style.display = 'block';
updateBtn('btn_'+id, 'Hide');
}
}
function updateBtn(id, newStr){
var btn = document.getElementById(id);
btn.innerHTML = newStr + ' ' + btn.innerHTML.split(' ')[1];
}
function showEle(id){
document.getElementById(id).style.display = 'block';
updateBtn('btn_'+id, 'Hide');
}
function hideEle(id){
document.getElementById(id).style.display = 'none';
updateBtn('btn_'+id, 'Show');
}
<button id="btn_vision" type="button" onclick="showhide(this)">Show Vision</button>
<button id="btn_bio" type="button" onclick="showhide(this)">Show Bio</button>
<button id="btn_xyz" type="button" onclick="showhide(this)">Show Xyz</button>
<button id="btn_abc" type="button" onclick="showhide(this)">Show Abc</button>
<div id="vision" style="display: none;">
<p>This is my vision</p>
</div>
<div id="bio" style="display: none;">
<p>This is my bio</p>
</div>
<div id="xyz" style="display: none;">
<p>This is my xyz</p>
</div>
<div id="abc" style="display: none;">
<p>This is my abc</p>
</div>
Note: You might want to initialize the currPage with the first page's id since it gives a better feel.
Say currPage = "vision" and also make display block for div id = "vision".
I learned AngularJS before I learned how to connect vanilla JS to HTML. When I run this code in my browser, the console.logs work, but the number 3 isn't showing up in my first die.
Can you help me fix my code?
JavaScript:
var roll = document.getElementById('roll');
function Dice() {
Document.write('1');
}
function printNumber() {
var one = document.getElementById("one");
one.innterHTML = "3";
console.log('printNumber called!');
}
roll.onclick = function() {
printNumber();
console.log('rolled!');
};
HTML:
<div class="row">
<div class="dice" id="one">
</div>
<div class="dice" id="two">
2
</div>
</div>
<div class="row">
<div class="button" id="roll">Roll the dice!</div>
</div>
<script type="text/javascript" src="dice.js"></script>
innter should be inner and Document should be document.
function Dice() {
document.write('1');
}
function printNumber() {
var one = document.getElementById("one");
one.innerHTML = "3";
console.log('printNumber called!');
}
roll.onclick = function() {
printNumber();
console.log('rolled!');
};