Question

我想更改图像元素的src，因为我使用了这个代码，但是当我点击＆＃34;添加＆＃34;它时它不起作用。按钮，请帮忙.....

    <html>
    <head>
        <meta charset="UTF-8">
        <title>Edit Home Page</title>
        <script type='text/javascript'>
            function setimgsrc()
            {
                $('#image').attr("src",document.getElementById("src").val());
            };
            </script>
    </head>    
 <body>      
   <div class='center-block'>                          
<label >course title: </label>             
<input type="text" id="title" name="title" placeholder="enter title for this course" >             
<br> <label >course description: </label>             
<input type="text" id="des" name="des" placeholder="enter decription for this course" >             
<br> <label >image source : </label>             
<input type='text' id='src' name='src' >             
<input type='button' class='btn' onclick='setimgsrc()' value='add'>             <br> <img  id='image' style='width:500px; height:500px' >                     </div>     
</body> 
</html>

Answer 1

您尚未添加jquery library，此处是更新后的代码：

<html>
<head>
	<meta charset="UTF-8">
	<title>Edit Home Page</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type='text/javascript'>
		function setimgsrc()
		{
			$('#image').attr("src",$("#src").val());
		};
	</script>
</head>    
<body>      
	<div class='center-block'>                          
		<label >course title: </label>             
		<input type="text" id="title" name="title" placeholder="enter title for this course" >             
		<br> <label >course description: </label>             
		<input type="text" id="des" name="des" placeholder="enter decription for this course" >             
		<br> <label >image source : </label>             
		<input type='text' id='src' name='src' >             
		<input type='button' class='btn' onclick='setimgsrc()' value='add'>             
		<br> 
		<img  id='image' style='width:500px; height:500px' >                     
	</div>     
</body> 
</html>

Answer 2

您没有包含jquery库。你的头部应该是

＆lt; script src =“https://code.jquery.com/jquery-1.11.3.js”＆gt;＆lt; / script＆gt;

    <script type='text/javascript'>
        function setimgsrc()
        {
           var getImage = $('#src').val();             
           $('#image').attr("src", getImage);
        };
        </script>

如果您不想使用jquery，那么您应该重写setimgsrc（）函数，如下所示

function setimgsrc（） {

            var getImage = document.getElementById("src").value;            
            document.getElementById("image").src = getImage;                
        };

如何通过javascript

2 个答案: