Replace text on button click - javascript

I'm looking for some code that will allow me to click a button (Button with value "Next") which will then replace some of the code I have on my page with new code. This is my current code, I need to replace everything after the score counter. Apologies for the sloppy code, I'm pretty new to this.
<body>
<p>Score: <span id="counter">0</span></p><br/>
<p>1) What colour is this?</p><br />
<p><img style= "margin: 0 auto;" src="colour1.png" width="70%"></p><br /><br />
<p><button id="none" onClick="showDiv01()">Almond White</button><br>
<button id="score" onClick="showDiv02(); this.disabled = 'true';">Raspberry Diva</button><br>
<button id="none" onClick="showDiv01()">Melon Sorbet</button><br>
<button id="none" onClick="showDiv01()">Gentle Lavender</button><br></p>
<div id="answer1" style="display:none;" class="wronganswer">✗</div>
<div id="answer2" style="display:none;" class="rightanswer">✓</div>
<p><input type="button" name="next2" value="Next" onClick="showDiv2()" /></p>
</body>

try the below fiddle i am not sure its perfect u want or not but just tried
<body>
<p>Score: <span id="counter">0</span></p><br/>
<div id="div1">
<p>1) What colour is this?</p><br />
<p><img style= "margin: 0 auto;" src="colour1.png" width="70%"></p><br /><br />
<p><button id="none" onClick="showDiv01()">Almond White</button><br>
<button id="score" onClick="showDiv02(); this.disabled = 'true';">Raspberry Diva</button><br>
<button id="none" onClick="showDiv01()">Melon Sorbet</button><br>
<button id="none" onClick="showDiv01()">Gentle Lavender</button><br></p>
</div>
<div id="div2" hidden>
1) What car is this?</p><br />
<p><img style= "margin: 0 auto;" src="colour1.png" width="70%"></p><br /><br />
<p><button id="none" onClick="showDiv01()">abc</button><br>
<button id="score" onClick="showDiv02(); this.disabled = 'true';">def</button><br>
<button id="none" onClick="showDiv01()">rtrt</button><br>
<button id="none" onClick="showDiv01()">xyz</button><br></p>
</div>
<div id="answer1" style="display:none;" class="wronganswer">✗</div>
<div id="answer2" style="display:none;" class="rightanswer">✓</div>
<p><input type="button" id="btn" name="next2" value="Next" onClick="showDiv2()" /></p>
</body>
$('#btn').click( function() {
$("#div1").hide();
$("#div2").show();
});
http://jsfiddle.net/uxyQG/

If you want to replace the text on button click. I checked you button have an onClick="showDiv2()"
So try like this (for an example)
function showDiv2 () {
document.getElementById('counter').innerHTML = ""; //empty the value
}
Here is example fiddle, I have create when you click next the counter will be replaced.

What you want to do here is place all the content you want to replace inside a <div>.
then you will want to give that div an id attribute.
e.g.
<div id="yourID">
HTML CONTENT HERE
</div>
Then in javascript, you would need to create a function that would fire on an onclick event.
Markup:
<input type="button" onclick="changeContent('yourID', '<div>OtherHTML</div>')" value="NEXT" />
when you have these 2 components, you will want to make a script that will execute your function.
<script type="text/javascript">
function changeContent(id, html) {
//Get the element that needs it's contents replaced.
var container = document.getElementById(id);
//insert new HTML onclick.
container.innerHTML = html;
}
</script>
This is a simple example of what you need.
You could externalize this javascript in a seperate file.
If you want to do this, you will need to include the script in the <head> of your html document.
<script type="text/javascript" src="path/to/js.js"></script>
Because this will load before any of the DOM will have been loaded, you will get errors.
To solve this, the new contents of the file will be:
js.js
window.onload = function() {
function changeContent(id, html) {
//Get the element that needs it's contents replaced.
var container = document.getElementById(id);
//insert new HTML onclick.
container.innerHTML = html;
}
}
This should work for you in this scenario.
Hope this helped
&dash; Sid

Related

Can not find new elements after javascript append using chrome webdriver

Here's the simple HTML generated from a c# dotnet core asp pages, application. I'm trying to get the number of input boxes from colorList div using a webdriver test. The initial count of two works, but once i simulate the clicking the button labeled "+" i still only get two, where i expected to get three. I've tried all kinds of different waits both implicit and explicit, but can't seem to get it to work.
<!DOCTYPE html>
<html>
<head>
<title>Home page - SeleniumWebTest</title>
</head>
<body>
<div class="container body-content">
<body>
<form method="post" id="Form" action="/?handler=saveall">
<div><h4>Colors</h4><button type="button" onclick="CreateColor();" value="create" class="btn-sm">+</button></div>
<div class="indent" id="colorlist">
<input value="Red" type="text" id="Colors" name="Colors" /><br />
<input value="Blue" type="text" id="Colors" name="Colors" /><br />
</div>
<br />
<div>
<h1>More Stuff</h1>
</div>
<br />
<button type="submit" value="SaveAll" class="btn btn-primary">Save All</button>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8Ps9gVily6NMr7L9g0lJf0cQzaqUzEq26TUrHCT4rH1GQIY0QLmjjc6cnQBE8aBvQlWdXAQZ2ub08pm2yIMWkUICO51XkWH6d11pf7y3pr3HwqRgBkiFdpaHSFYQsJsWdLba01RGCL8yYsUad9Vn2JQ" /></form>
</body>
<script type="text/javascript">
function CreateColor() {
var form = document.getElementById("colorlist");
var input = document.createElement("input");
input.type = "text";
input.id = "ColorId";
input.name = "ColorName";
form.appendChild(input);
linebreak = document.createElement("br");
form.appendChild(linebreak);
};
</script>
</div>
</body>
</html>
Here's my test
[Fact]
public void ColorTest()
{
var _driver = new ChromeDriver();
_driver.Navigate().GoToUrl("https://localhost:44394/");
Assert.Equal("Home page - SeleniumWebTest", _driver.Title);
var colorInputs = _driver.FindElements(By.Id("Colors"));
Assert.Equal(2, colorInputs.Count);
var plusButton = _driver.FindElement(By.XPath("//button[text()='+']"));
plusButton.Click();
var colorInputs2 = _driver.FindElements(By.Id("Colors"));
Assert.Equal(colorInputs.Count+1,colorInputs2.Count); // <-- Fails
_driver.Close();
_driver.Quit();
}
Yikes, after creating the question i see the problem. The id's for the new elements were being generated differently for razor pages versus javascript.

Replace text inside a div element

What should i do if i need to replace the "test test" message with custom one using JavaScript?
<div class="outputmsg_container" style="" id="output_messages"><
button class="btn btn-icon close icon-cross" onclick="GlideUI.get().clearOutputMessages(this); return false;">
<span class="sr-only">Close Messages"</span>
</button>
<div class="outputmsg_div">
<div class="outputmsg outputmsg_error notification notification-error"><img class="outputmsg_image" src="images/outputmsg_error_24.gifx" alt="">
<span class="outputmsg_text">test test</span>
</div>
</div>
</div>
Use innerHTML to change the HTML inside an element.
<label for="newhtml">HTML (or text) to be inserted inside div:</label>
<br/>
<input type="text" id="newhtml"/>
<br/>
<input type="button" id="change" value="Insert" onClick="change()"/>
<br/>
<span id="container"></span>
<script>
function change(){
document.getElementById("container").innerHTML = document.getElementById("newhtml").value;
}
</script>
Here is an example to do this with jquery.
$('.outputmsg_text').html("YOUR CUSTOM TEXT")
Here's an example JSFiddle (REQUIRE JQUERY)
<button id="change">Change Text</button>
<div id="div">
Some text
</div>
<script>
$("#change").click(function(){
var name = prompt("What text shoud it be?");
if(name){
$("#div").html(name);
}
});
</script>

Changing the text/background color through JavaScript immediately changes back

Trying to change text color and background color of the text according to what I write in the textbox. Seems to work briefly; it shows me the color for a split second, like a quick snap and that's it.
<!DOCTYPE html>
<html>
<head>
<title>Prelab5 Ex1</title>
<style>
</style>
</head>
<body>
<h2>Prelab5 Ex1</h2>
<form method="post">
<input type="text" name="background" id="background"/><input type="submit" value="Background" onclick="changeBack();"/>
<br/>
<input type="text" name="text" id="text"/><input type="submit" onclick="changeText();" value="Text"/>
<br/>
<div id="content">Some text</div>
</form>
<script>
var DivText = document.getElementById("content");
function changeBack(){
var backColor = (document.getElementById("background").value);
DivText.style.backgroundColor= backColor;
}
function changeText(){
var textColor = (document.getElementById("text").value);
DivText.style.color = textColor;
}
</script>
</body>
</html>
Your onclick handlers for your submit buttons don't return false so your form is submitted resetting the page. You could add return false like
var DivText = document.getElementById("content");
function changeBack() {
var backColor = (document.getElementById("background").value);
DivText.style.backgroundColor = backColor;
}
function changeText() {
var textColor = (document.getElementById("text").value);
DivText.style.color = textColor;
}
<!DOCTYPE html>
<html>
<head>
<title>Prelab5 Ex1</title>
</head>
<body>
<h2>Prelab5 Ex1</h2>
<form method="post">
<input type="text" name="background" id="background" />
<input type="submit" value="Background" onclick="changeBack(); return false" />
<br/>
<input type="text" name="text" id="text" />
<input type="submit" onclick="changeText(); return false" value="Text" />
<br/>
<div id="content">Some text</div>
</form>
</body>
</html>
Your "submit" input performs the action on the form, which is currently set to "post". This will post the form to the same page (and cause a refresh).
You can override the default functionality by adding return false; to the ONCLICK attribute on all input type= "submit" elements.
In other words, this:
needs to become this:
<input type="submit" onclick="changeText();" value="Text"/>
but why use input type = submit at all?
You can just as easily use a link or button without the form:
<a href="#" onclick="changeText();"/>Test</a>
or
Click me!
which will do the same thing without needing to override the a forum action :)

How to write jQuery function to show and hide some parts of a form

I have got the following HTML code.
<input type="button" id="B1" onclick="return false;" value="Show" />
<input type="button" id="B2" onclick="return false;" value="Show" />
<input type="button" id="B3" onclick="return false;" value="Show" />
<input type="button" id="B4" onclick="return false;" value="Show" />
<p id="P1">This is a paragraph with little content.</p>
<p id="P2">This is another small paragraph.</p>
<p id="P3">This is a paragraph with little content.</p>
<p id="P4">This is another small paragraph.</p>
I would like a jQUERY function to do the folowing.
If I click B1 button it should show P1 text and also the B1 button text should change to Hide and next time when I click B1 button it should hide P1 text and change B1 button text to show. Same for B2 P1, B3 P3, B4 P4.
Try this : Use jQuery Start With Selector and bind click event for all button having id starts with 'B' and show / Hide respective paragraph.
$(function(){
//hide all paragraph
$('p[id^=P]').hide();
$('input[id^=B]').click(function(){
var index = $(this).attr('id').replace('B','');
var lable = $(this).val()=="Show"?"Hide":"Show";
$(this).val(lable);
if(lable=="Show")
$('#P'+index).hide();
else
$('#P'+index).show();
});
});
Demo JSFiddle
You can use the slideToggle function and the :visible selector to know if the div is open or not:
<input type="button" id="B1" onclick="$('#P1').slideToggle();" value="Show" />
After, I let you to write the function ;)
This is working fine !! for me, You can use below code.
JavaScript
`
<script src="js8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#P1").hide();
$("#P2").hide();
$("#P3").hide();
$("#P4").hide();
$('input[id^=B]').click(function () {
var index = $(this).attr('id').replace('B', '');
if ($(this).val() == "Show") {
$('#P' + index).show();
$(this).val("Hide")
}
else {
$('#P' + index).hide();
$(this).val("Show")
}
});
});
</script>

Get img src from input box into a div

The idea behind this small project of mine is to have an user enter an URL for an img, when the user hits a button the img should then be inserted into a new <div> within the page.
I tried looking for hours at stackoverflow but I honestly don't understand how I can use other answers to my own code. Most of the CSS and HTML code is already done, I just need help with the javascript part if its possible at all.
Here is what I have so far:
HTML code:
<form name="imgForm">
enter URL:
<input type="text" name="inputbox1" value="src" />
<input type="button" value="Get Feed" onclick="GetFeed()" />
</form>
Javascript code:
<script type="text/javascript">
function GetFeed(imgForm) {
var imgSrc = document.getElementById("src").value;
}
</script>
Can anyone help me out? I dont know where to go from here.. at least give me some pointers how can i get the value from the txt box and add a new
<div><img src="user input from txt box should go here"/></div> for every time an unser inserts and new URL for an img?
I think according to your need how can i get the value from the txt box and add a new <div><img src="user input from txt box should go here"/></div> you need this
HTML
<form>
<input type="text" id="txt">
<input id="btn" type="button" value="Get Image" onclick="getImg();" />
</form>
<div id="images"></div>
JS (goes inside your head tags)
function getImg(){
var url=document.getElementById('txt').value;
var div=document.createElement('div');
var img=document.createElement('img');
img.src=url;
div.appendChild(img);
document.getElementById('images').appendChild(div);
return false;
}
Here is an example. ​
You should add an id attribute to your <input>:
<input type="text" name="inputbox1" id="box1" value="src" />
...then, adjust your code:
var imgSrc = document.getElementById('box1').value;
Once you have the source, you can get back an object for the img tag, and set its properties using the value from the text box. The img object's properties are defined by the Document Object Model:
http://www.w3schools.com/jsref/dom_obj_image.asp
Something like this will create a div with an image element that has a src equal to the text in the input box. It then appends the div to end of the page.
<html>
<head>
<script type="text/javascript">
function GetFeed(form){
var imgSrc = form.elements["inputbox1"].value;
var imgDiv = document.createElement('div');
imgDiv.innerHTML = "<img src=\"" + imgSrc + "\"/>"
document.body.appendChild(imgDiv);
}
</script>
</head>
<body>
<form name="imgForm">
enter URL:
<input type="text" name="inputbox1" value="src" />
<input type="button" value="Get Feed" onclick="GetFeed(this.form)"/>
</form>
</body>
</html>
your codes better should be like this:
html Codes:
<div class="input-group col-md-5" style="margin: 0px auto;">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-image">
Choose
</button>
</div>
<input type="text" id="image_label" class="form-control" name="image" aria-abel="Image" aria-describedby="button-image" onclick="getImg()">
</div>
<div id="image-holder">
<img id="imgThumb" class="img-thumbnail" src="{{Your Image Source}}" alt="">
</div>
js Codes:
function getImg(){
var url = document.getElementById('image_label').value;
var img = document.getElementById('imgThumb');
img.src = url;
return true;
}

Categories

Resources