Return JavaScript into a HTML attribute - javascript

How is it possible to return a string from a JavaScript Code into a HTML attribute like in the following example?
<div class="xx" animation="yy" animate-duration="<spript>Code goes here<script>" ...>
</div>
I can not get it right, is there a solution?

<div class="xx" id="id1" animation="yy"></div>
<script>
document.getElementById("id1").setAttribute("animate-duration", "your value");
</script>
The id of the above <div> tag is id1. So document.getElementById("id1").setAttribute("animate-duration", "your value"); selects the <div> tag and sets it's animate-duration value to whatever you set.

I don't think your example will work because the script tags will only be treated as a string. I suggest you use Element.setAttribute(attribute name, attribute value) if you only want to set the attribute of the element.
<div class="xx"></div>
<script>document.querySelector(".xx").setAttribute("animate-duration", "value");</script>
See the following for more info:
https://developer.mozilla.org/en/docs/Web/API/Element/setAttribute

Related

How to edit an element attribute within the html through Selenium and Python?

So my problem is that i need to edit this image source in selenium, but it doesn't have id or class.
<div id="mbr-content">
<div class="nope" some random stuff>
<script>
</script>
<div class="mbr-image-container">
<div class="mbr-image-wrapper">
<div class="mbr-image">
<img src="this source need to modify" alt="app_image">
</div>
</div>
</div>
#Html continues here
I just in some reason cant figure this one out.
I know that I need to use this command but not sure what shut I putt inside as script.
driver.execute_script("something here")
Using python-3.7
The javascript required to set the src attribute of your <img> element is:
document.querySelector(".mbr-image > img").src="whatver you want";
So, you can try below solution:
js = 'document.querySelector(".mbr-image > img").src="whatver you want";'
driver.execute_script(js)
As per the HTML you have shared to edit the src attribute of the desired element you can use the following solution:
element = driver.find_element_by_xpath("//div[#class='mbr-image-container']/div[#class='mbr-image-wrapper']/div[#class='mbr-image']/img[#alt='app_image']")
driver.execute_script("arguments[0].setAttribute('src','something here')", element)

image as value in hidden input field

I am trying to have an image as value in a hidden input field which I want to use in my javascript.
<input type="hidden" class="anything" value="i need an image here" />
then I want to use it in a javascript file like
$(".anything").val()
How can I accomplish this ? Any help'll be great.
you can make a div with a class img and give it a property display:none and can call it using jquery.
<html>
<head></head>
<body>
<div class="img" style="display:none";><img src="adress"> </div>
<script>
$(document).ready(function(){
$(.img).fadeIn(1000);
});
</script>
</body>
$(".anything").val() cannot be an image because .val() return a String and an image is an DOM object.
You will need at least a conversion from string to a DOM event.
The two main ways to do are :
the value contains the url of the image instead of the image then you can get the image with : $("<img>").attr("src", $(".anything").val())
you can user base64 data but as Dave Salomon say it's probably not a good ideal
You could possibly write the imagesrc as a string in the value like:
$(".anything").val("/path/to/image.png")
Or which part of the image do you want as value in the input field?

Code running successfully but not showing output in the browser

Below is my code.
HTML :
<div id="vis">
</div>
JavaScript:
$('#vis').find('.set_texts').wrapInner('<div class="new_text">');
($('#vis').find('.new_text').text("NEW TEXT VALUE"));
When I run this code in 'inspect element' I can see the below code as output but nothing is showing in the browser. I want to show 'NEW TEXT VALUE' in the browser,how?
<div id="vis">
<div class="new_text">NEW TEXT VALUE</div>
</div>
<text> is not a valid HTML tag, you can use <div>,<p>,<span>... instead:
$('#vis').find('.set_texts').wrapInner('<span class="new_text">');
$('#vis').find('.new_text').text("NEW TEXT VALUE");
instead of this
$('#vis').find('.set_texts').wrapInner('<text class="new_text">');
use this
$('#vis').find('.set_texts').wrapInner('<span class="new_text">');
first you need to change html.
html:
<div id="vis">
<div class="set_texts"></div>
</div>
you do not have .set_texts element in your selected div(#vis). so wrapInner() is not adding any div.
you also have extra ) in the second line of jquery.
try this jquery:
$(document).ready(function(){
$('#vis').find('.set_texts').wrapInner('<div class="new_text">');
$('#vis').find('.new_text').text("NEW TEXT VALUE");
});
working demo
let me know if you have any question.

wrong values with JS innerHTML

I have this code:
<div id='html'><input type='text' value='' /></div><br><a onClick="alert(document.getElementById('html').innerHTML);">click me</a>
http://jsfiddle.net/EQ88q/
If you change input value and click on "click me" you won't see the real input value. Is there any propety instead of "innerHTML" that gets the real values?
PS: I'm using plain javascript I can't use any library.
This will work, but it is quite crude:
<div id='html'>
<input type='text' value=''/>
</div>
<script>
function LinkClick()
{
var ele = document.getElementById('html');
ele.children[0].setAttribute("value",ele.children[0].value);
alert(ele.innerHTML);
}
</script>
<br><a onClick="LinkClick()">click me</a>
I see ComCrude just provided this exact answer in the comments
The elem.innerHTML is the HTML code inside of the element. In this case, the innerHTML is empty string as there is no content inside the tag.
You should use input_elem.value to obtain the value property of a input element.

Jquery change value of span tag - reference from another div

So my html code is:
<div class="product-details">
<div class="availability in-stock">
Availability: <span>In stock</span>
</div>
</div>
I would like to use Jquery to change the span value of "in stock". I am somewhat new to Javascript and Jquery, so how would I change that span value without it having an id to reference.
Many thanks in advance!
$('.in-stock span').html("your new string");
http://jsfiddle.net/hQqtU/
$('.product-details .availability span').text('foo');
Fiddle: http://jsfiddle.net/maniator/EryVF/
What you are looking for is either the text() or the html() like so:
$('.availability span').html('This is what you want to change it to');
Here is an example: JsFiddle Demo

Categories